寫手機端自適應的前端,一般用啥實現?
1. 用 rem 單位
以寬為 750px 的移動設計稿為例:
// 屏幕適配(windowWidth/設計稿寬*100) ——*100為了方便計算。即font-size值是手機deviceWidth與設計稿比值的100倍
document.getElementsByTagName(html)[0].style.fontSize=window.screen.width/7.5+px;
// 如上:通過查詢屏幕寬度,動態的設置html的font-size值,設計稿大多以750*1334 設置的,通過上述換算後,在設計圖上一張150*150的圖,在css中對應的rem值則為:1.5*1.5rem
用法 :
比如上圖的,全省的寬 280px ,高 58px , 正常開發下,程序的css上需要寫 :
{
width: 280px;
height: 58px;
}
但是我們只需要::
{
width: 280 / 100 rem;
height: 58 / 100 rem;
}
也即是:
{
width: 2.8rem;
height: 0.58rem;
}
換算公式就是具體: 像素/100 = rem, 還能指定 7.5rem 寬 就是屏幕的總寬
如果是寬為 1080px 的設計稿:
document.getElementsByTagName(html)[0].style.fontSize=window.screen.width/10.8 +px;
如上內容,就可以適配移動端了。
激進點的話直接vw
移動端開發主要有兩種技術選型:
一.單獨製作移動端頁面(主流)
優點是開發便利,不用考慮兼容性。
單獨頁面又分四種技術選型:
1. 流式布局(百分比布局)
每個盒子的寬度單位使用百分之幾,不受像素限制。
2. flex彈性布局 (常見)
布局簡單,不用算盒子的寬度。圍繞flex相關屬性進行布局
3. rem + 媒體查詢手寫布局
rem是盒子的寬度/長度單位,類似於em,會根據視口大小來調整每一個單位的大小。
媒體查詢@media 也可以根據視口大小來設置盒子不同的樣式
4. 混合布局(常見)
我全都要
二.響應式
一個頁面多套布局來實現響應式,缺點製作麻煩,兼容性問題大。
1. 手寫媒體查詢
2. 使用boostrap框架
先碼到這裡,有時間再更
柵格化~
bootstrap
藉助於框架或者自己根據@media screen區分樣式。做好規劃就行了
- @media screen:根據顯示器像素比來動態修改控制項顯隱(主要用於pc)
- vw:目前市面很少出現但及其好用的適配單位,設置在根節點上
- rem:rem(依據 - 根節點),美團和去哪網就採用的這個oo~
- % + em:百分比決定寬高,em(依據-父節點)決定細節(如字體,shadow等)
html+css
推薦閱讀: