所謂前端適配，就是為了讓移動設計稿在大部分的移動裝置上看起來有一致的展示效果，目前比較流行的方法有兩種。一種是強制meta viewport寬度為設計稿寬度，一種是使用rem
自適應布局的flexible.js。各有利弊，使用第一種在某些瀏覽器的webview裡面會出現相容問題，而且對於1畫素會無法渲染。而用rem的方案在背景和字型上也會有某些問題。
方案一：強制meta viewport的寬度為設計稿的寬度
把下面的**放在頭部，然後製作稿跟pc上一樣的製作就行·
// 根據設計稿的寬度來傳參 比如640 750 1125
!function(designwidth) else
} else
}(640);
//code from
我之前寫過幾篇關於flexible.js的文章，總的來說，還是需要配合rem來使用，這樣子flexible.js庫才能發揮它的自適應布局作用。計算尺寸時，只需要將對應的尺寸除以100。原始碼：
(function(designwidth, maxwidth) ;
if (width > maxwidth)
var rem = width * 100 / designwidth;
// var rem = width / 10; // 如果要相容vw的話分成10份 **做法
= rem + "px"; //舊的做法，在uc瀏覽器下面會有切換橫豎屏時定義了font-size的標籤不起作用的bug
remstyle.innerhtml = 'html';
} // 設定 viewport ，有的話修改 沒有的話設定
metael = doc.queryselector('meta[name="viewport"]');
// 20171219修改：增加 viewport-fit=cover ，用於適配iphonex
metaelcon = "width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no,viewport-fit=cover";
if(metael) elseelse
} //要等 wiewport 設定好後才能執行 refreshrem，不然 refreshrem 會執行2次；
refreshrem();
if (docel.firstelementchild) else
win.addeventlistener("resize", function() , false);
win.addeventlistener("pageshow", function(e)
}, false);
if (doc.readystate === "complete") else , false);
}})(750, 750);
vw 前端 前端適配 vw rem自適應適配方案
先說好處 無需借助js，只用css就可以實現一定屏寬範圍內元素大小隨螢幕寬度改變平穩變化。再說用法 第一步 元素大小單位選用rem。第二步 根據設計稿的螢幕寬度設定html的font size大小，且單位用vw。第三步 通過media query設定html根font size的最大最小px值。以上...
移動端前端適配方案（總結）
from 鏈結 2.flex彈性布局 3.rem viewport 縮放 4 rem實現 meida queries 的方式可以說是最早期的移動端布局方式，它主要是通過查詢裝置的寬度來執行不同的 css 最終達到介面的配置。核心語法是 media screen and max width 600px...
前端 自適應布局方法總結
一欄固定一欄自適應 實現 left 固定寬度 main 自適應寬度 左右兩欄固定，中間自適應 自身浮動法的原理就是使用對左右使用分別使用float left和float right，float使左右兩個元素脫離文件流，中間元素正常在正常文件流中，使用margin指定左右外邊距對其進行乙個定位。lef...