寫手機端頁面應該注意的地方

像素：一個像素就是計算機屏幕所能顯示的一種特定顏色的最小區域。

像素分爲：設備像素和css像素。

視口：是html的父元素，即視口爲初始包含塊

視口分爲：

• 　　佈局視口（移動端css佈局的依據視口）
  
• 　　視覺視口（看到網站的區域）
• 　　理想視口（定義理想的佈局視口）

在手機上爲了容納爲桌面瀏覽器設計的網站，默認的佈局視口寬度遠大於屏幕的寬度

<meta name="viewport" contant=" width:device-width" />意爲將佈局視口的寬度設爲理想視口

關於視口：

1. 在PC端，佈局視口就是瀏覽器窗口
2. 在M站，視口分爲佈局視口和視覺視口
3. M站還有一個理想視口（理想視口的尺寸因設備和瀏覽器不一樣而不一樣，且能夠將佈局視口的寬度設爲理想視口）

設備像素比（DPR）Device Pixel Rati  簡稱（DPR）

DPR成立的前提是縮放比爲1。

DPR=設備像素個數/理想視口css像素個數（device-width）.

device-width意爲設備屏幕的寬度

<meta>標籤

<meta name="viewport" contant="width=device-width,inital-scale=1.0;maximum-scale=1.0;user-scalable=no" />

• contant裏面的內容爲一個字符串值
• width=device-width  意爲將佈局視口的寬度設爲理想視口
• inital-scale=1.0頁面初始縮放比例爲1
• maximum-scale=1.0頁面的最大縮放比例爲1
• user-scalable是否容許用戶對頁面進行修改

 

適用於DPR=2的設備

<meta name="viewport" contant="width=device-width,inital-scale=0.5,maximum-scale=0.5,user-scalable=no">

 

適用於全部設備：

<meta name="viewport" contant="">

<script>

　　var scale=1/window.devicePixelRatio;

　　document.querySelector('meta[name="viewport"]').setAttribute('contant','width=device-width,inital-scale='+scale+',maximum-scale='+scale+',minmum-scale='+scale+',user-scale=no');

</script>

在適應了全部設備以後遇到了div的寬高不會隨着屏幕的大小而變化因此能夠在一個JS文件中加上：

document.documentElement.style.fontSize=document.documentElement.clientWidth/10+"px";

不一樣的設備如今能夠等比縮放了，可是有一個缺點：轉換尺寸時要除以75須要藉助計算器，影響效率，且會出現除不盡的狀況，使頁面存在誤差。

 

 

方法2：

不修改meta標籤

<meta name="viewport" contant="width=device-width,maxmum-scale=1,initial-scal=1,user-scarable=no">

<script>

　　document.documentElement.style.fontSize=document.documentElement.clientWidth/7.5 + "px";

</script>

7.5是以rem爲單位的頁面總寬，是蘋果6的寬度，蘋果5的話是除以其餘的

（思考：以爲這樣很差用不一樣的屏幕難道還要寫不一樣的嗎？）

 

文字字體不須要換算成rem可用下面的代碼

 

 

在屏幕最大是321px時body中默認字體的大小：

@media screen and (max-width:321px){

　　body{

　　　　font-size:16px;

　　　　}

}

 

在屏幕大小在321px和400px之間時body中默認字體的大小

@media screen and (min-width:321px)and(max-width:400px){

　　body{

　　　　font-size:17px;

　　　　} 

}

在屏幕最大是400px時body中默認字體的大小

@media screen and(min-width:400px){

　　body{

　　　　font-size:19px;

　　　　}

}

片斷二：

@media screen and (max-width:321px){

　　header,footer{

　　　　font-size:16px;

　　　　}

}

@media screen and (min-width:321px)and(max-width:400px){ 

　　header,footer{

　　　　font-size:17px;

　　　　}

}

@media screen and(min-width:400px){

　　header,footer{

　　　　font-size:19px;

　　　　}

}