一 . meta標(biāo)簽的設(shè)置
1.<!--元標(biāo)簽引入外部的資源->
<!--視口設(shè)置視口可以保持pc端和移動端的比例1:1的-->
二、移動端的兩種方法
web中常用的單位
-px像素
- em相對于父級元素進行計算
- deg角度值
- %寬高自適應(yīng)
-pt磅
2.移動端中非常重要的單位:
?? 方法-:
rem相對單位,相對于根元素(html)的font-size進行計算的
移動端的思路?
???? -移動端的單位需要使用rem(是相對于html計算)
-元素盒子大小是2rem切換移動端根據(jù)每個移動端的htm進行計算
-想辦法改變每一個html 下面的font-size的值(媒體查詢)
計算公式：設(shè)備像素比=物理像素/邏輯像素
-設(shè)備像素比簡稱為dpr
-物理像素: ui設(shè)計圖的大小(已知)
-邏輯像素:前端需要設(shè)置的css樣式的值
=>邏輯像素=物理像素1 dpr
常見的設(shè)計圖(在工作中設(shè)計圖有640px、750px是最常見的、1080px)
640px dpr為2
750px dpr為2
1080px dpr考慮為3
重要并且要記住的總結(jié):
??????? -設(shè)計圖最常見的就是750px,dpr為2
??????? -計算公式:邏輯像素=物理像素1 dpr
移動端1px不用轉(zhuǎn)換為rem
在高清顯示屏中1px會顯示2px的寬度? -真機測試bug
??? - 1px => 0.5px
- css3縮放屬性
方法二:
vw + rem相對于視口的單位
- 1vw =當(dāng)前瀏覽器窗口的百分之一
- 100vw = 100%的寬度
-沒有滾動條的時候,兩者是相等的
- 滾動條是占位置, 100%的寬度是不包含滾動條的兩者是不相等的(vw建議在移動端使用)
推算思路:
-在移動端中100vw相當(dāng)于沾滿整個瀏覽器
-拿到u設(shè)計圖1vw等于設(shè)計圖的百分之一
100ww/設(shè)計圖的大小=每-份的大小
-量出設(shè)計圖的某個盒子元素
1.? 常見的設(shè)計圖寬度為640px,dpr為2
???? - 640px/2 = 320px
???? - 320px = 100vw
???? - 1vw= 3.2px
???? . 1px = 0.3125vw
2.? 常見的設(shè)計圖寬度為750px,dpr為2
- 750px/2 = 375px
- 375px = 100vw
- 1vw = 3.75px
. 1px = 0.2667vw
計算公式:
-當(dāng)設(shè)計圖寬度為640pxhtml{font-size:0.3125vw}
-當(dāng)設(shè)計圖寬度為750pxhtml{font-size:0.2667vw}
-導(dǎo)航(100%*88px) => vw
-導(dǎo)航的高度:88px/2 = 44rem
總結(jié):
-當(dāng)設(shè)計圖寬度為640px html{font-size:0.3125vw}
-當(dāng)設(shè)計圖寬度為750px html{font-size:0.2667vw}
-物理像素/dpr=?rem
