【移動端適配方案一 彈性佈局】@media標籤+rem+viewport實現移動端螢幕適配
一、從設計稿說起：
採用rem來佈局，其實設計稿是多大都沒有關係，設計稿給480、600或者750都可以，其他尺寸也可以，你就想成它是一張A4紙，然後這些數字只是對這張紙的最大計量單位。反正一張圖就那麼大，無論計量單位是多少，UI設計師能夠在一張A4上給的東西都是一樣的。比如說要在這個A4紙的設計稿上橫向排列連個元素一個佔比1:2，那麼在設計稿上的體現就是下圖：
對，關鍵詞是元素在設計稿上的佔比、比例，劃重點啊~，它設計稿的大小沒有關係，那只是設計師的最大計量單位，如上圖如果480的設計稿，要放1:2的元素那麼就是160px:320px，如750的設計稿這兩個元素在設計稿上體現出來就是250px:500px。總之rem的核心就是
為了更形象的說明，我給出如下圖：給定設計稿750px，設定viewport為理想視口，然後通過計算螢幕與設計稿的縮放比例，再用比例乘以font-size基準值100px得到對應螢幕下設定的html的font-size
總結：
前端開發工程師根據UI設計師給的設計稿進行開發。 為了保證在各種螢幕上的不失真，就要根據實際螢幕寬度做等比例換算，才能寫進CSS：需要滿足 1、寫入CSS的尺寸/螢幕寬度 = UI圖標註的尺寸/UI圖寬度 （由於設定了理想視口，所以視口寬度=螢幕寬度，這裡在比值的時候就直接用螢幕寬度） 即：寫入CSS的尺寸 = (UI圖標註的尺寸*螢幕寬度)/UI圖寬度 2、我們將根元素基準值設定為100px 然而為了不失真要計算出對應的比例，於是1rem = 螢幕寬度/UI設計圖寬度*100px 即：螢幕640px，給的設計稿寬640px，那麼這種情況下1rem就表示100px 如果螢幕320px，給的設計稿寬640px，那麼這種情況下1rem就表示50px 要想做成響應式，只需要配合@media計算好對應螢幕下html font-size的值。 3、於是：寫入CSS的尺寸 = UI圖標註的尺寸/100px*1rem
二、同一尺寸設計稿在不同螢幕下：
接下來我們以iphone6的螢幕375來說明，如何將設計稿轉化成前端頁面。
使用黑科技rem，rem是什麼，看這裡一些名詞介紹。
根據上面給出的計算公式
1rem = 螢幕寬度/UI設計圖寬度*100px
我們計算出iphone6的375尺寸： 設計稿375px情況下。1rem=100px 設計稿480px情況下。1rem=78.125px 設計稿600px情況下。1rem=62.5px 設計稿750px情況下。1rem=50px |
接下來，我們現在關注設計稿375
設計稿375px的時候要想在iphone6的375下顯示完整，由於設定viewport為理想視口ideal viewport（關於三種viewport的介紹），發現原來是1:1的（螢幕375px，設計稿也是375px），那麼好辦了。直接兩個元素125px和250px就好了。對這樣在這個螢幕下是可以了，但是螢幕變了比如
我們計算出iphone6p的414尺寸： 設計稿375px情況下。1rem=110.4px 設計稿480px情況下。1rem=86.25px 設計稿600px情況下。1rem=69px 設計稿750px情況下。1rem=55.2px |
那麼這樣直接設定元素為px就比較麻煩。於是我們用rem單位。設定好html的font-size為對應螢幕大小下的對應尺寸（就是1rem=後面的數字px）
比如現在設計稿375
@media (min-width: 375px) {
html {
font-size: 100px;
}
}@media (min-width: 414px) {
html {
font-size: 110.4px;
}
}於是兩個元素可以這麼設定，不管這樣都除以100就可以了，然後不用管螢幕，因為對應螢幕的根元素大小已經設定好了，所以元素大小1.25rem和2.5rem。
ok，來驗證一下:
螢幕375=1.25*100+2.5*100
螢幕414=1.25*110.4+2.5*110.4
可能大家有疑問414的螢幕中元素尺寸變了呀。沒錯在375的設計稿在414的螢幕中顯示的這兩個元素的尺寸變成了這樣125px==>138px、250px==>276px。但是138:276=125:250=1:2，對嗎？
因此，在還原設計稿的時候關鍵是計算設計稿中元素相對設計稿的比例，從而根據這個比例計算出不同螢幕尺寸中元素佔螢幕寬度的多少
所以只要用@media設定好對應螢幕中html的font-size之後，程式碼中的元素只要用設計稿上的元素除以100單位用rem就可以適應各個螢幕了。看圖更具體~~
三、不同尺寸設計稿在同一尺寸螢幕下：
那麼問題來了，設計是給一個750的設計稿呢？其實，我們只需要計算各個螢幕下1rem是多少（公式1rem = 螢幕寬度/UI設計圖寬度*100px），然後設計稿上元素再換算的時候全部除以100，具體看下圖：
原理講完了，開始下面是拿來即用的程式碼~
方式一：採用@media在css中設定對應螢幕下的html的font-size
首先是sass程式碼：
@charset "utf-8";
/*
1、寫入CSS的尺寸/螢幕寬度 = UI圖標註的尺寸/UI圖寬度
即：寫入CSS的尺寸 = (UI圖標註的尺寸*螢幕寬度)/UI圖寬度
2、我們將根元素設定為100px，則1rem=100px
然而為了不失真要計算出對應的比例，於是1rem = 螢幕寬度/UI設計圖寬度*100px
即：螢幕640px，給的設計稿寬640px，那麼這種情況下1rem就表示100px
如果螢幕320px，給的設計稿寬640px，那麼這種情況下1rem就表示50px
要想做成響應式，只需要配合@media計算好對應螢幕下html font-size的值。
當然為了好計算，我們全部以100px為基準
3、於是：寫入CSS的尺寸 = UI圖標註的尺寸/100px*1rem
*/
// 計算rem的基準字型
$rem-base-font-size: 100px;
// UI設計圖的解析度寬度
$UI-width: 750px;
// 需要適配的螢幕寬度
$device-widths: 240px, 320px, 360px, 375px, 384px, 411px, 414px, 424px, 480px, 540px, 640px, 720px, 750px, 768px, 800px, 980px, 1024px, 1080px, 1152px, 1366px, 1440px, 2160px;
//根據不同裝置的螢幕寬度，定義<html>的基準font-size
@each $current-width in $device-widths {
@media (min-width: $current-width) {
html {
font-size: $current-width * $rem-base-font-size/$UI-width;
}
}
}轉化成css程式碼
@charset "UTF-8";
/*
1、寫入CSS的尺寸/螢幕寬度 = UI圖標註的尺寸/UI圖寬度
即：寫入CSS的尺寸 = (UI圖標註的尺寸*螢幕寬度)/UI圖寬度
2、我們將根元素設定為100px，則1rem=100px
然而為了不失真要計算出對應的比例，於是1rem = 螢幕寬度/UI設計圖寬度*100px
即：螢幕640px，給的設計稿寬640px，那麼這種情況下1rem就表示100px
如果螢幕320px，給的設計稿寬640px，那麼這種情況下1rem就表示50px
要想做成響應式，只需要配合@media計算好對應螢幕下html font-size的值。
當然為了好計算，我們全部以100px為基準
3、於是：寫入CSS的尺寸 = UI圖標註的尺寸/100px*1rem
*/
@media (min-width: 240px) {
html {
font-size: 32px;
}
}
@media (min-width: 320px) {
html {
font-size: 42.66667px;
}
}
@media (min-width: 360px) {
html {
font-size: 48px;
}
}
@media (min-width: 375px) {
html {
font-size: 50px;
}
}
@media (min-width: 384px) {
html {
font-size: 51.2px;
}
}
@media (min-width: 411px) {
html {
font-size: 54.8px;
}
}
@media (min-width: 414px) {
html {
font-size: 55.2px;
}
}
@media (min-width: 424px) {
html {
font-size: 56.53333px;
}
}
@media (min-width: 480px) {
html {
font-size: 64px;
}
}
@media (min-width: 540px) {
html {
font-size: 72px;
}
}
@media (min-width: 640px) {
html {
font-size: 85.33333px;
}
}
@media (min-width: 720px) {
html {
font-size: 96px;
}
}
@media (min-width: 750px) {
html {
font-size: 100px;
}
}
@media (min-width: 768px) {
html {
font-size: 102.4px;
}
}
@media (min-width: 800px) {
html {
font-size: 106.66667px;
}
}
@media (min-width: 980px) {
html {
font-size: 130.66667px;
}
}
@media (min-width: 1024px) {
html {
font-size: 136.53333px;
}
}
@media (min-width: 1080px) {
html {
font-size: 144px;
}
}
@media (min-width: 1152px) {
html {
font-size: 153.6px;
}
}
@media (min-width: 1366px) {
html {
font-size: 182.13333px;
}
}
@media (min-width: 1440px) {
html {
font-size: 192px;
}
}
@media (min-width: 2160px) {
html {
font-size: 288px;
}
}用法
1、頁面頂部加上
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximun-scale=1.0, user-scalable=no">
2、將上面給的css程式碼複製到頁面裡面。
3、所有的設計稿上面的實際px全部除以100之後單位是rem就可以了
4、我是以設計稿750計算的，所以在750px的時候font-size是100px，如果你的設計稿尺寸不一樣，在sass程式碼中修改一下重新生成即可。
這裡還有一套對應每個畫素螢幕的sass程式碼，css程式碼太多自己生成吧。但是上面那個已經將主流螢幕包含了，沒必要每個畫素都適配。只需要在釋出新機型的時候，將新機型尺寸適配一下就ok
// 計算rem的基準字型
$rem-base-font-size: 100px;
// UI設計圖的解析度寬度
$UI-width: 750px;
@for $device-width from 1px through 2000px {
@media (min-width: $device-width) {
html {
font-size: $device-width * $rem-base-font-size/$UI-width;
}
}
}
方式二：採用js的動態設定當前螢幕下的html的font-size