移動端布局（3）

css3引入了一種新的布局模式，叫做flexbox布局，即伸縮布局和（flexible box）模型，很多地方又稱為彈性盒模型，我們下面都叫彈性盒模型，它可以用來提供乙個更加有效的方式制定、調整和分布乙個容器裡的專案布局

css中的布局方式總結：

塊布局 

行內布局
**布局
定位布局
flexbox布局（css3新引入）

伸縮容器就是通過display屬性設定為flex或者inline-flex的容器（盒子），伸縮專案就是這個伸縮容器下面的子元素

flexbox布局語法規範主要分為三種：

舊版本：2023年版本，使用display:box或者display:inline-box

混合版本： 2023年版本，使用display:flexbox 或者display:inlne-flexbox
最新版本： 使用display:flex 或者 display:inlne-flex

#4.4.flex初體驗

lang
="en"
>
>
charset
="utf-8"
/>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
/>
>
documenttitle
>

移動端布局（3）

css3引入了一種新的布局模式，叫做flexbox布局，即伸縮布局和 flexible box 模型，很多地方又稱為彈性盒模型，我們下面都叫彈性盒模型，它可以用來提供乙個更加有效的方式制定 調整和分布乙個容器裡的專案布局 css中的布局方式總結 塊布局 行內布局 布局 定位布局 flexbox布局 ...

移動端開發頁面布局 3

1 響應式布局定義 頁面布局會隨著螢幕大小變化而發生不同的響應，稱為響應式布局。1 不需要單獨寫移動端頁面 2 根據不同裝置發生變化 2 原理 通過 查詢針對不同寬度的裝置進行布局和樣式的設定，從而適配不同裝置 分四個檔位 手機 768px 平板 768px 992px 桌面顯示器 992px 12...

移動端布局

預設以寬度為640px的設計稿為基準頁面，然後通過js獲取當前顯示裝置的尺寸，對應的調整 html 標籤的font size大小，從而實現通過以rem為單位的移動端布局適配。function win,doc function layoutcalc html.style.fontsize rem px...