移動端適配問題

孫淑建發(fā)布于2019-04-23 13:23 / 2688人閱讀

摘要：讀設(shè)備寬度，動態(tài)設(shè)置標(biāo)簽的屬性中的值網(wǎng)易的做法網(wǎng)易的做法現(xiàn)在的設(shè)計稿都是寬度的寬，那要想實現(xiàn)樣式設(shè)計圖這種比較方便的折算方式，就要設(shè)置成也就是說總結(jié)總結(jié)是為了實現(xiàn)移動端自適應(yīng)布局。

適配問題

怎么適配iphone6
1px問題

為什么頁面與設(shè)計稿會出現(xiàn)偏差？

dpr=設(shè)備像素/ css像素，只有dpr等于1的時候，實際效果和設(shè)計稿的尺寸比例才是1:1。

因為iPhone6的DPR（設(shè)備像素比）為2，設(shè)備像素為750，所以iPhone6的理想視口尺寸為375px。

因為設(shè)計稿是基于設(shè)備像素，頁面是基于css像素的。css中的寬度是基于理想視口的（寬度375px），設(shè)計圖上是基于設(shè)備寬度750px，所以尺寸不對。

怎么處理？

init-scale=0.5 。
缺陷：但是寬度不能自適應(yīng)

??rem大法

基于html標(biāo)簽的font-size設(shè)置的

手淘的做法：

把縮放尺寸設(shè)置成dpr的倒數(shù)。

讀設(shè)備寬度，動態(tài)設(shè)置meta標(biāo)簽的 content屬性中的maximun,minimum,user-scable值

網(wǎng)易的做法

現(xiàn)在的設(shè)計稿都是750px寬度（p6的寬），那要想實現(xiàn) css樣式：設(shè)計圖=1：100 這種比較方便的折算方式，font-size就要設(shè)置成7.5px；

也就是說1rem = 7.5px

總結(jié)

rem是為了實現(xiàn)移動端自適應(yīng)布局。通過在html元素下設(shè)置font-size定義。

另外，手淘的做法是通過判斷設(shè)備的dpr，將縮放規(guī)模scale設(shè)置為dpr的倒數(shù)，再用js動態(tài)設(shè)置meta標(biāo)簽的content屬性和font-size基準(zhǔn)值的大小。

網(wǎng)易的做法是，禁用用戶縮放，scale始終為1，將font-size設(shè)置為625%，即 1rem=100px。

1px問題

如何實現(xiàn)移動端的1px邊框

方法一：`transformY:scale(50%)`

方法二：

border-width:0 0 2px 0;
border-image:url("xxx.png") 0 0 2 0 stretch // 圖片地址 上下剪切 左右剪切 上下邊寬 左右邊寬 圖片拉伸

vm/vh+rem大法

vm/vh是未來的趨勢

rem方式弊端：需要動態(tài)計算根字體大小

做法：用vm/vh來計算根字體大小，剩下的自適應(yīng)布局依舊按照rem的方法

用vm/vh做適配頁面

??關(guān)于vm/vh

1. 與%百分比的區(qū)別

vm/vh 是基于視窗的
%基于父元素

2. 使用場景

隨著頁面不同，文字圖片縮小放大（適配頁面）

3. 與rem的區(qū)別

vm/vh沒有最大、最小寬大的限制（設(shè)備很小的時候，圖文會縮得特別特別小……）

措施：

1.解決背景過小問題

body{
    min-width:xxx px;
    max-width: xxx px;
}

2.媒體查詢限制根文字大?。ń鉀Q文字過小問題）

html { font-size: ($vw_fontsize / ($vw_design / 2)) * 100vw; // 同時，通過Media Queries 限制根元素最大最小值 @media screen and (max-width: 320px) { font-size: 64px; } @media screen and (min-width: 540px) { font-size: 108px; } }