2-移動端適配問題

解決網頁在移動端的適配問題,一般的思路是通過查詢設備的屏幕大小,自動對元素進行等比縮放,如果是PC端的適配問題就是通過瀏覽器可視區域的大小進行縮放,一般是有固定的網頁中心區域

重點:瞭解PC端和移動端的視口寬度,以及vw相對單位的自適應原則-等比縮放嵌套的所有元素

什麼是視口
視口是用於設置瀏覽器根元素(html)大小的
默認情況下,不同的瀏覽器會設置不同的視口大小,由瀏覽器的內核決定
默認情況下,PC端視口的大小就是瀏覽器可視區域的大小
默認情況下,移動端可視區域的大小並不是瀏覽器可視區域大小,不同瀏覽器內核會給視口設置不同的默認大小,一般有兩種:980px/1024px,對於iphone和ipad默認的視口大小都是980px,爲了保證能夠完整的顯示網頁的內容,移動端的瀏覽器會自動縮放網頁
如何保證在移動端正常顯示網頁佈局呢?
由於自動縮放,佈局顯示混亂,解決方法是讓移動端的視口和設備的大小一致,這樣就不會由於默認視口過大,造成根據屏幕寬度的自動縮放

通過meta標籤調整視口的做法只適用於移動端,對於PC端還是默認的視口大小也就是瀏覽器的可視範圍
vw和vh也是相對單位,em相對於父元素,rem相對於根元素,vw和vh相對於視口.如:
視口寬度爲1000,高度爲1000,1vw=1000/100=10px,1vh=1000/100=10px
既然vw和vh也是相對單位,所以可以使用vw和vh做適配進行等比縮放
使用vw和vh不同通過媒體查詢自己計算不同屏幕的大小,系統會自行計算

rem和em一個是相對於根元素(body)字體的大小,一個是相對父元素字體的大小
使用方法:將750px的設計圖片等分爲n份,每份的大小m利用媒體查詢,利用結果根據份數n動態計算不同屏幕的m大小.也就是說利用rem/em做適配需要自己計算一個相對值再進行等比縮放
實現方法:根據查詢結果設置最小寬度的相對大小
蘇寧易購

@media screen and (min-width:750px){
  html{
  font-size:7.5px;
}
}
@media screen and (min-width:375px){
  html{
  font-size:3.75px;
}
}