這是我參與8月更文挑戰的第5天，活動詳情查看：8月更文挑戰css

適配的目標

讓一些不能等比自適應的元素, 達到當設備尺寸發生改變的時候, 等比例適配當前設備. 使用媒體查詢, 根據不一樣設備按照比例設置HTML的字體大小, 而後頁面元素使用rem作尺寸單位.html

rem 實際開發適配方案

按照設計稿與設備寬度的比例, 動態計算並設置html根標籤的font-size大小 (媒體查詢).
CSS中, 設計稿元素的寬/高/相對位置等取值, 按照同等比例換算爲rem的值.

rem 適配方案主流技術

主要有兩種技術:小程序

less + 媒體查詢 + rem
flexible.js + rem

比較

兩種方案都存在, 但方案2更簡單一些.微信小程序

1. 技術方案1

less
媒體查詢
rem

設計稿常見尺寸寬度:

設備	常見寬度
iPhone 4.5	640px
iPhone 678	750px
Android	目前市場主流設備尺寸按照 1080px 設計

通常狀況下, 咱們以一套或兩套效果圖適應大部分的屏幕, 放棄極端屏或對其優雅降級, 犧牲一些效果, 如今基本以750px爲準.微信

動態設置HTML標籤font-size大小

假設設計稿是750px, 咱們把整個屏幕劃分爲15等份 (固然劃分標準不一, 也能夠是20等份或者10等份等), 這時每一份的HTML字體大小就是50px.markdown

當設備是320px的時候, 每一份的字體大小就是 320/15 = 21.33 px. 即:less

font-size字號 = 屏幕寬度 / 份數
複製代碼

這裏的主要思想是無論屏幕寬度是怎樣的, 咱們要保證的是劃分的份數是相同的, 好比說都是15份. 當咱們使用rem做爲單位爲一些頁面元素設置大小的時候, 無論屏幕有多寬, 每一份HTML字體大小在當前屏幕中佔的比例都是相同的, 所以咱們設置的那些頁面元素在整個屏幕中佔的比例也是相同的, 這樣就實現了不一樣屏幕下, 頁面元素盒子等比例縮放的效果.svn

代碼演示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> /* 媒體查詢不一樣屏幕下的html字號, 設計圖參考750px, 將屏幕寬度劃分爲15等份 */ @media screen and (min-width: 320px) { html { font-size: 21.33px; } } @media screen and (min-width: 750px) { html { font-size: 50px; } } /* 設置一個100*100的盒子 */ .box { width: 2rem; height: 2rem; background-color: blueviolet; } </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>
複製代碼

2. 技術方案2

flexible.js
rem

手機淘寶團隊出的簡潔高效移動端的適配庫post

不須要寫不一樣屏幕的媒體查詢, 由於裏面js作了處理字體

引入flexible.js文件

經過<script>標籤.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <script src="js/flexible.js"></script>
    <title>Document</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div></div>
</body>
</html>
複製代碼

它的原理是把當前設備劃分爲10等份, 可是不一樣設備下, 比例仍是一致的. 咱們要作的是肯定好當前設備的HTML文字大小就能夠了. 好比當前的設計稿是750px, 那麼咱們只須要把html文字大小設置爲75px (750px/10)就能夠了.

頁面元素rem值: 頁面元素的px值 / 75 剩餘的部分就交給flexible.js來去算.

若是咱們須要設置最大的寬度750px, 大於這個寬度之後就不會改變了, 須要在css裏進行額外設置. 注意這裏要使用 !important提高優先級, 淫才flexible.js中的css樣式是行內式的.

index.css:

@media screen and (min-width: 750px) {
    html {
        font-size: 75px !important;
    }
}

div {
    width: 1rem;
    height: 1rem;
    background-color: pink;
}
複製代碼

效果:

VSCode插件 -- cssrem

Converts between px and rem units in VSCode, And support WXSS.

Support intellisense (支持智能轉換)
- px -> rem
- rem -> px
- px -> rpx (微信小程序)
- rpx -> px (微信小程序)
Support mouse hover to display the conversion process
Support mark

啓用cssrem後的效果:

設置HTML字體大小的基準值

通常狀況下, 咱們須要設置一下HTML字體大小的基準值.

點擊vscode的設置

從新設置 Root Font Size

移動端佈局rem