怎么做移動(dòng)端的樣式適配？

在移動(dòng)端雖然整體來(lái)說(shuō)大部分瀏覽器內(nèi)核都是 webkit，而且大部分都支持 css3 的所有語(yǔ)法。但手機(jī)屏幕尺寸不一樣，分辨率不一樣，或者有時(shí)需要考慮橫豎屏的問(wèn)題，或者考慮到各式各樣的移動(dòng)端兼容性問(wèn)題。

1、方案選擇

1、使用 css 的媒體查詢 @media
基于 css 的媒體查詢屬性 @media 分別為不同屏幕尺寸的移動(dòng)設(shè)備編寫(xiě)不同尺寸的 css 屬性，示例如下所示。雖然此方法能在一定程度上解決移動(dòng)設(shè)備適配的問(wèn)題，但我們也可以看出其存在以下問(wèn)題，所以其已幾乎被歷史潮流淘汰。

頁(yè)面上所有的元素都得在不同的 @media 中定義一遍不同的尺寸，這個(gè)代價(jià)有點(diǎn)高；
如果再多一種屏幕尺寸，就得多寫(xiě)一個(gè) @media 查詢塊；

@media only screen and (min-width: 375px) {
  .logo {
    width : 62.5px;
  }
}

@media only screen and (min-width: 360px) {
  .logo {
    width : 60px;
  }
}

@media only screen and (min-width: 320px) {
  .logo {
    width : 53.3333px;
  }
}

2、使用 rem 單位
rem（font size of the root element）是指相對(duì)于根元素的字體大小的單位，如果我們?cè)O(shè)置 html 的 font-size 為 16px，則如果需要設(shè)置元素字體大小為 16px，則寫(xiě)為 1rem。但是其還是必須得借助 @media 屬性來(lái)為不同大小的設(shè)備設(shè)置不同的 font-size，相對(duì)上一種方案，可以減少重復(fù)編寫(xiě)相同屬性的代價(jià)，簡(jiǎn)單示例如下所示。
我們也能看到該方案存在以下問(wèn)題：

不同的尺寸需要寫(xiě)多個(gè) @media；
所有涉及到使用 rem 的地方，全部都需要調(diào)用方法 calc() ，這個(gè)也挺麻煩的；

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

@media only screen and (min-width: 360px) {
  html {
    font-size : 360px;
  }
}

@media only screen and (min-width: 320px) {
  html {
    font-size : 320px;
  }
}

//定義方法：calc
@function calc($val){
    @return $val / 1080;
}

.logo{
	width : calc(180rem);
}

3、flexible 適配方案
1、 使用 rem 模擬 vw 特性適配多種屏幕尺寸
它的核心代碼如下所示

// set 1rem = viewWidth / 10
function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
}
setRemUnit();

.2、控制 viewport 的 width 和 scale 值適配高倍屏顯示
設(shè)置 viewport 的 width 為 device-width，改變?yōu)g覽器 viewport（布局視口和視覺(jué)視口）的默認(rèn)寬度為理想視口寬度，從而使得用戶可以在理想視口內(nèi)看到完整的布局視口的內(nèi)容。
等比設(shè)置 viewport 的 initial-scale、maximum-scale、minimum-scale 的值，從而實(shí)現(xiàn) 1 物理像素=1 css像素，以適配高倍屏的顯示效果

var metaEL= doc.querySelector('meta[name="viewport"]');
var dpr = window.devicePixelRatio;
var scale = 1 / dpr
metaEl.setAttribute('content', 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no'); 

4、viewport 適配方案
vw 作為布局單位，從底層根本上解決了不同尺寸屏幕的適配問(wèn)題，因?yàn)槊總€(gè)屏幕的百分比是固定的、可預(yù)測(cè)、可控制的。 viewport 相關(guān)概念如下：

• vw：是 viewport’s width 的簡(jiǎn)寫(xiě)，1vw 等于 window.innerWidth 的 1%；
• vh：和 vw 類似，是 viewport’s height 的簡(jiǎn)寫(xiě)，1vh 等于 window.innerHeihgt 的 1%；
• vmin：vmin 的值是當(dāng)前 vw 和 vh 中較小的值；
• vmax：vmax 的值是當(dāng)前 vw 和 vh 中較大的值；

若視覺(jué)稿寬度為 750px，視覺(jué)稿中某個(gè)字體大小為 75px，則我們的 css 屬性只要如下這么寫(xiě)，不需要額外的去用 js 進(jìn)行設(shè)置，也不需要去縮放屏幕等；
.logo {
  font-size: 10vw; // 1vw = 750px * 1% = 7.5px
}

1、設(shè)置 meta 標(biāo)簽
在 html 頭部設(shè)置 mata 標(biāo)簽如下所示，讓當(dāng)前 viewport 的寬度等于設(shè)備的寬度，同時(shí)不允許用戶手動(dòng)縮放。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
?
2、px 自動(dòng)轉(zhuǎn)換為 vw
設(shè)計(jì)師一般給寬度大小為 375px 或 750px 的視覺(jué)稿，若采用 vw 方案的話，需要將對(duì)應(yīng)的元素大小單位 px 轉(zhuǎn)換為 vw 單位（需要手動(dòng)計(jì)算將 px 轉(zhuǎn)換為 vw）且不利于后續(xù)代碼維護(hù)
安裝 postcss-px-to-viewport 插件，來(lái)將 px 自動(dòng)轉(zhuǎn)換為 vw
npm install postcss-px-to-viewport --save-dev

2. iPhoneX 適配方案

安全區(qū)域指的是一個(gè)可視窗口范圍，處于安全區(qū)域的內(nèi)容不受圓角（corners）、齊劉海（sensor housing）、小黑條（Home Indicator）影響，如下圖藍(lán)色區(qū)域：


適配步驟

• 設(shè)置網(wǎng)頁(yè)在可視窗口的布局方式
  新增 viweport-fit 屬性，使得頁(yè)面內(nèi)容完全覆蓋整個(gè)窗口，只有設(shè)置了 viewport-fit=cover，才能使用 env()
  <meta name="viewport" content="width=device-width, viewport-fit=cover">

• fixed 完全吸底元素場(chǎng)景的適配

• 可以通過(guò)加內(nèi)邊距 padding 擴(kuò)展高度：

{
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

或者通過(guò)計(jì)算函數(shù) calc 覆蓋原來(lái)高度：

{
  height: calc(60px(假設(shè)值) + constant(safe-area-inset-bottom));
  height: calc(60px(假設(shè)值) + env(safe-area-inset-bottom));
}

• fixed 非完全吸底元素場(chǎng)景的適配
  像這種只是位置需要對(duì)應(yīng)向上調(diào)整，可以僅通過(guò)下外邊距 margin-bottom 來(lái)處理

{
  margin-bottom: constant(safe-area-inset-bottom);
  margin-bottom: env(safe-area-inset-bottom);
}

或者，你也可以通過(guò)計(jì)算函數(shù) calc 覆蓋原來(lái) bottom 值：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-511916.html

{
  bottom: calc(50px(假設(shè)值) + constant(safe-area-inset-bottom));
  bottom: calc(50px(假設(shè)值) + env(safe-area-inset-bottom));
}

到了這里，關(guān)于CSS知識(shí)點(diǎn)匯總(十)--移動(dòng)端適配的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！