viewport移動端適配

提到viewport移動端適配，那麼心中可能有幾個疑問？

1.爲何要進行移動端的適配?

2.viewport是什麼?

3.如何進行移動端適配?

1、移動端適配的目的：

一般咱們在pc上看到的頁面都是比較大的，在pc上訪問頁面是正常顯示的，默認是不會被縮放的，除非是手動進行了縮放，頁面纔會被放大比例或者是縮小比例顯示。可是在移動端是不同的，若是將一個pc端的頁面放到手機端進行訪問，那麼可能出現頁面擠到一塊兒、佈局錯亂或者出現橫向滾動條的狀況，咱們給用戶帶來很差的體驗。還有在屏幕尺寸大小不一樣的手機上進行訪問頁面時，頁面顯示的效果不能合理的展現，咱們指望的是在手機屏幕較大時顯示的內容比較大一些，手機屏幕小的時候頁面的內容也會縮小進行自適應。

所以，移動端適配的目的是在不一樣尺寸的設備上，頁面達到合理的展現（自適應）或者說是可以保持統一效果。

2、viewport的基本概念

1.一般viewport是指視窗、視口，瀏覽器上(也多是一個app中的webview)用來顯示網頁的那部分區域。在移動端和pc端視口是不一樣的，pc端的視口是瀏覽器窗口區域，而在移動端有三個不一樣的視口概念：佈局視口、視覺視口、理想視口

• 佈局視口：在瀏覽器窗口css的佈局區域，佈局視口的寬度限制css佈局的寬。爲了能在移動設備上正常顯示那些爲pc端瀏覽器設計的網站，移動設備上的瀏覽器都會把本身默認的viewport設爲980px或其餘值，通常都比移動端瀏覽器可視區域大不少，因此就會出現瀏覽器出現橫向滾動條的狀況

• 視覺視口：用戶經過屏幕看到的頁面區域，經過縮放查看顯示內容的區域，在移動端縮放不會改變佈局視口的寬度，當縮小的時候，屏幕覆蓋的css像素變多，視覺視口變大，當放大的時候，屏幕覆蓋的css像素變少，視覺視口變小。

• 理想視口：通常來說，這個視口其實不是真是存在的，它對設備來講是一個最理想佈局視口尺寸，在用戶不進行手動縮放的狀況下，能夠將頁面理想地展現。那麼所謂的理想寬度就是瀏覽器（屏幕）的寬度了。

爲了理解起來更清楚一點，在網上找了兩張比較易懂的圖片。若是對這三個視口的概念還不是很清楚，看看下面幾張圖可能就會一目瞭然：

佈局視口

視覺視口

2.那麼如何設置理想視口呢？很簡單，只須要在html的header中加入一段很重要的代碼

<meta name="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0">	
複製代碼

這行代碼你們應該都不陌生，或者說是知道加了這行代碼，而後頁面的寬度就會跟個人設備寬度一致。，實際上，它就是設置了理想視口，將佈局視口的寬度設置成了理想視口（瀏覽器/設備屏幕的寬度）。

上面說到的視口寬度等均是css像素，因此須要簡單瞭解一下幾個基本的概念：

• css像素：代碼中使用的邏輯像素，衡量頁面上的內容大小

• 設備像素：即物理像素，控制設備顯示的單位，與設備、硬件有關

• 設備獨立像素：與設備無關的邏輯像素，不一樣於設備像素（物理像素），不是真實存在的。

• 設備像素比：定義設備像素與設備獨立像素比的關係window.devicePixelRatio）設備像素比=物理像素/設備獨立像素

• 分辨率：指的是屏幕上垂直和水平的總物理像素

3.在meta標籤中，除了viewport這個很重要的屬性，用來設置視口的一些行爲,還有幾個與其搭配一塊兒使用的屬性：

屬性	含義	取值
width	定義視口的寬度，單位爲像素	正整數或設備寬度device-width
height	定義視口的高度，單位爲像素	正整數或device-height
initial-scale	定義初始縮放值	整數或小數
minimum-scale	定義縮小最小比例，它必須小於或等於maximum-scale設置	整數或小數
maximum-scale	定義放大最大比例，它必須大於或等於minimum-scale設置	整數或小數
user-scalable	定義是否容許用戶手動縮放頁面，默認值yes	yes/no

3、適配的幾種方案：

（1）css3 媒體查詢:經過媒體查詢的方式，編寫適應不一樣分辨率設備的的css樣式

@media screen and (max-width: 320px){
    ....適配iphone4的css樣式
}
@media screen and (max-width: 375px){
     ....適配iphone6/7/8的css樣式
}
@media screen and (max-width: 414px){
    ....適配iphone6/7/8 plus的css樣式
}
......
複製代碼

優勢：

• 方法簡單，只需修改css文件

• 調整屏幕寬度時不用刷新頁面就能夠響應頁面佈局

缺點：

• 代碼量大，不方便維護

• 不可以徹底適配全部的屏幕尺寸，須要編寫多套css樣式

(2)百分比佈局方案：給元素設置百分比，例如2個div想佔滿寬度100%，那麼一個div設置寬度爲50%，這樣不固定寬度，使得在不一樣的分辨率下都能達到適配

那麼須要清楚一個問題，各個子元素或屬性的百分比是根據誰來設定呢？

1. 子元素width、height的百分比:子元素的width或height中使用百分比，是相對於子元素的直接父元素
2. margin和padding的百分比：在垂直方向和水平方向都是相對於直接父親元素的width，而與父元素的height無關
3. border-radius的百分比：border-radius的百分比是相對於自身寬度，與父元素無關

優勢：

• 寬度自適應，在不一樣的分辨率下都能達到適配

缺點：

• 百分比的值很差計算
• 須要肯定父級的大小，由於要根據父級的大小進行計算
• 各個屬性中若是使用百分比，相對父元素的屬性並非惟一的
• 高度很差設置，通常須要固定高度

(3)rem方案:

• rem單位：rem是一個只相對於瀏覽器的根元素（HTML元素）的font-size的來肯定的單位。默認狀況下，html元素的font-size爲12px
• 經過rem來實現適配：rem單位都是相對於根元素html的font-size來決定大小的,根元素的font-size至關於提供了一個基準，當頁面的寬度發生變化時，只須要改變font-size的值，那麼以rem爲固定單位的元素的大小也會發生響應的變化。須要先動態設置html根元素的font-size,再計算出其餘頁面元素以rem爲固定單位的值

控制font-size的js代碼

<script type="text/javascript">
    (function() {
        var deviceWidth = document.documentElement.clientWidth;
        deviceWidth = deviceWidth < 320 ? 320 : deviceWidth > 640 ? 640 : deviceWidth;
        document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
    })();
</script>
複製代碼

上面的js代碼中deviceWidth/7.5，表示font-size用deviceWidth/7.5的值來表示，1rem的值就是deviceWidth/7.5，當視口容器發生變化時就能夠動態設置font-size的大小，不論頁面寬度變大仍是縮小，視口寬度都會被等分爲7.5份，每一份就是1rem,從而1rem在不一樣的視覺容器中表示不一樣的大小，但在視口總寬度中的佔比是不變的，實現了等比適配。

這個7.5在這裏並非一個固定的值，也能夠設置爲其餘值，由於設計稿通常是根據iphone6/7/8的寬度來設計，通常爲375或者750,因此爲了方便計算，在這裏取7.5，可以被整除方便後面的計算。

元素的rem值計算

.div{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 0.96rem;
        background:#aaa;
        font-size: 0.24rem;
        
    }
複製代碼

假定一個div的寬度爲100px,那麼在計算時，根據設置的1rem = 50px，因此100px=2rem，其餘全部的屬性值均可以相似這樣計算。font-size通常狀況下仍是使用px,由於在rem中，只要使用了rem單位都會被轉換，那麼在轉換的時候，會出現不能被整除或者出現小數的狀況好比10.333333px，那麼在顯示時就可能出現一些誤差。並且若是指望在小屏幕下面顯示跟大屏幕同等量的字體，可是因爲rem的等比縮放，在小屏幕下就會存在小屏幕字體更小的狀況，因此對於字體的適配更好的作法就是使用px和媒體查詢來進行適配。

優勢：

• rem單位是根據根元素font-size決定大小，只要改變font-size的值，以rem爲固定單位的元素大小也會發生響應式的改變

缺點：

• 必須經過一段js代碼控制font-size的大小
• 控制font-size的js代碼必須放在在頁面第一次加載完成以前，而且放在引入的css樣式代碼以前。

(4)vw、vh方案 css3中引入與視口有關的新的單位vw和vh，vw表示相對於視口的寬度，vh表示相對於視口高度

單位	含義
vw	相對於視口的寬度，視口寬度是100vw
vh	相對於視口的高度，視口寬度是100vh
vmin	vw和vh中較小的值
vmax	vw和vh中較大的值

vw單位換算： 視口寬度爲100vw佔滿整個視口區域，那麼1vw至關於佔整個視口寬度的1%，因此1px= 1/375*100 vw 全部的頁面元素均可以直接進行計算換算成vw單位，可是這樣計算和百分比方案計算比較相似，都會比較麻煩。

可是有一個比較厲害的插件—— postcss-px-to-viewport，能夠預處理css,將px單位轉換爲vw單位，可是須要進行一些相關的webpack配置

{
    loader: 'postcss-loader',
    options: {
    	plugins: ()=>[
        	require('autoprefixer')({
        		browsers: ['last 5 versions']
        	}),
        	require('postcss-px-to-viewport')({
        		viewportWidth: 375,
        		viewportHeight: 1334,
        		unitPrecision: 3,
        		viewportUnit: 'vw',
        		selectorBlackList: ['.ignore', '.hairlines'],
                minPixelValue: 1,
                mediaQuery: false
        	})
    	]
}
複製代碼

接下來是對postcss-px-to-viewport配置中的屬性的介紹：

單位	含義
viewportWidth	視口寬度（數字）
viewportHeight	視口高度（數字）
unitPrecision	設置的保留小數位數（數字）
viewportUnit	設置要轉換的單位（字符串）
selectorBlackList	不須要進行轉換的類名（數組）
minPixelValue	設置要替換的最小像素值（數字）
mediaQuery	容許在媒體查詢中轉換px（true/false）

優勢：

• 指定vw\vh相對與視口的寬高，由px換算單位成vw單位比較簡單
• 經過postcss-px-to-viewport插件進行單位轉換比較方便

缺點：

• 直接進行單位換算時百分比可能出現小數,計算不方便

• 兼容性- 大多數瀏覽器都支持、ie11不支持 少數低版本手機系統 ios八、android4.4如下不支持

最後，有一個問題，既然百分比和vw都是須要計算百分比，那麼兩個方案的不一樣之處？

單位	含義
%	width、height等大部分相對於直接父元素、border-radius、translate、background-size等相對於自身
vw	只相對於視口寬度

以上，若有錯漏，歡迎指正！

@Author：lj0214