繼續更新移動端的一個布局，這也是經典中的經典，當初只知道個rem和vwvh適配，其實這里面還有很多的門道不只是一個適配這么簡單
一.前置
1.背景縮放
我們都知道做移動端，給的圖都是二倍圖，你拿來用直接縮減一半，這樣在手機上顯示出來也會很清晰
那么我們背景圖片怎么來進行縮放呢
推薦一個多倍圖切圖神奇 cutterman
background-size除了cover contain還可以輸入px和百分比
原尺寸100px
二.移動開發
1.主流方案
-
單獨制作頁面
2.移動端解決方案
注意初始化的css檔案可以直接下載normalize.css
特殊樣式
3.布局方案
1.流式布局
也就是百分比布局，寬度百分比，高度固定
但是有個bug，就是這個布局如果螢屏縮減到一定寬度，可能會導致布局錯亂
所以一般會搭配max-width或者min-width來使用
整個盒子小于等于992，大于等于768是正常自適應范圍，超過這兩個區間不再自適應就停到那個狀態
專案：（京東）
-
由于下面的布局都是占滿螢屏所以可以直接給body設定wid100% 但是限制一個范圍，320是現在手機最小解析度，max-width1000，參考京東手機端官網
-
這個部分用到了三欄布局因為中間是自適應的
通過定位來做
-
注意二倍精靈圖并不能想這樣做
因為這樣后面的background-size是基于整張背景圖的來
精靈圖的二倍圖應該把我們取到的坐標除以2，同時size應該為精靈圖除以2的寬高
2.flex布局
-
這樣一個導航解決思路 雙重flex
-
如果要換背景圖，或者就是統一寫一個樣式，后面有一些自己的單獨樣式可以這樣來寫
這個點方便在只用寫一個類名，而且類名都是不同的
重點在選擇器，用到屬性選擇器，而且類似于正則，表示以什么開頭的屬性
這是一個公共屬性然后自己有自己的背景就可以單獨去添加
3.rem+less+媒體查詢適配
前面流式布局和flex布局不能讓文字大小隨著螢屏變化而變化，而且高度都是固定不能自適應
首先是媒體查詢方案，就是通過媒體查詢去設定不同寬度的fontsize大小
-
方案一：
rem是可以自適應的所以做一套即可，剩下的螢屏會自己去適應
首先我們需要寫一個公共樣式里面裝我們對于各個螢屏設定的媒體查詢
該模式下區別于flex和百分比，可以直接將寬度設定為rem
該布局方案只是涉及單位用到這些，但是布局還是要用到flex或者float
4.rem+flexible
現在就只需要按照設計稿做一份，剩下的螢屏適配媒體查詢就不用寫了
vscode插件cssrem，可以自動將px轉化為rem，直接寫px值即可
但是他默認的html字體大小為16px
要修改的話打開vscode設定，命令面板搜索settings.json
打開默認設定
搜索cssroot將其修改為你設計稿的html字體大小
做移動端，如果電腦查看用flexible去做適配會有問題，會超大，這個時候要限制它的大小要配合媒體查詢來做
注意important
5.回應式布局（媒體查詢）
6.回應式布局（bootstrap）
4.總結
先考慮是單獨給移動端一個網址還是回應式一個網址既可以移動端又可以pc端
然后選擇布局方式
完全可以選擇一種，然后其他也可以用的混合開發
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/500335.html
標籤：其他