移動端適配的問題

標籤：

1.如何適配？

想要在移動端的不同尺寸裝置間做適配，使得頁面配置可以等比例縮放。

於是我立刻想到了百分比布局和rem布局。

百分比布局無法適配性定高，只能用px定死，顯然這是無法接受的。

rem布局不是響應式布局方案，它的應用僅僅局限於移動端，不同尺寸的行動裝置，是一種等比縮放的適配方案。

 

2.如何用rem做適配？

業內比較流行的做法：

　　1.設定viewport為裝置寬度（不一定，但常用）

　　2、將viewport分成10rem，並計算出1rem在當前瀏覽器的像素值，賦給html的font-size（分成10rem只是為了方便計算，其他值也可以）

　　3.寫CSS代碼時，width，height，margin，padding等布局屬性，就不要再用px了，改用rem

 

3.viewport是什嗎？

viewport相當於虛擬畫布

寬度設定為500，那麼瀏覽器橫向將被分為500份，CSS的1px就是1/500

也就是說，這個寬度設定的越大，CSS的1px就越小

所以，在CSS中，1px是指viewport中的一個小方格，而viewport的寬度是可以設定的

 

4.什麼是CSS像素？

就是上述viewport裡的一個小方格

 

5.什麼是物理像素？

也就是我們常說的n*m解析度,即，螢幕上有n*m個像素點，它是螢幕能顯示的最小粒度。

 

6.像素密度？

dpi或ppi，螢幕上每實際英寸所佔的物理像素點數

 

7.如何計算轉換係數？

CSS像素=轉換係數*物理像素

轉換係數就是dpr,裝置像素比

假設：某台安卓手機，解析度是1920*1080，螢幕對角線是5英寸。那麼在這台手機上一個CSS像素佔了多少物理像素？

1.勾股定理算出對角線解析度√(1920²+1080²)≈2203px

2.算出dpi=對角線解析度/對角線英寸=2203/5≈440dpi

3.根據，440dpi屬於XXHDPI,轉換係數是3.

因此這一台手機1個CSS像素=3個物理像素。

 

8.device-width是多大？

device-width很明顯是CSS像素，因此

 device-width=物理像素（橫向）/轉換係數

上述安卓手機的device-width=1080/3=360

viewport設定為固定的數值可能會破壞這種轉換關係，一般設定為device-width

 

9.如何在高分屏上設定1px邊框？

如上述所言，比如那個安卓手機，1CSS像素代表3物理像素，如果我們把邊框設定為1px,那麼實際它會顯示為3像素寬。

 

方法一：viewport的initial-scale

　　設定為1/dpr,即轉換係數的倒數。

　　優點：不用改寫原來的border代碼；可以輕鬆設定圓角border-radius

　　缺點：整個頁面縮小了。設定1rem=dpr*document.documentElement.clientWidth/10.

 

方法二：transform的scale

　　在CSS3標準裡，可以縮放某個元素。

　　

　　優點：不需要縮放整個頁面

　　缺點：為border設定縮放屬性並做瀏覽器安全色，代碼量增加。無法實現border-radius圓角。

 

 

最後：

如果不設定meta viewport標籤，那麼行動裝置上瀏覽器預設的寬度值為800px，980px，1024px等這些，總之是大於螢幕寬度的。那麼內部元素尺寸也會比預想的要大，於是會出現捲軸！

移動端適配的問題