內容參考自：
我們知道網頁很寬，而移動裝置例如手機很窄，如果不進行螢幕適配，很容易導致網頁錯亂。
那麼螢幕適配有哪些方法呢？
首先是大家通常會想到的meta標籤。
利用meta標籤中viewport的通用屬性來處理。
width：設定layout viewport的寬度，正整數或字串「device-width」
initial-scale：設定頁面的初始縮放值，數字或小數
minimum-scale：允許使用者的最小縮放值
maximum-scale：允許使用者的最大縮放值
height：設定layout viewport的高度，一般不用
user-scaleable：允許使用者縮放，『yes』或『no』
target-densitydpi：在安卓4.0以下的裝置中不支援viewport的width，android自帶的瀏覽器設定target-density來達到目的；
target-densitydpi = ui-width/device-width*window.devicepixelration*160
//ui-width: 布局寬度
//device-width:螢幕解析度寬度 iphone4為640
//target-densitydpi=device-dpi 標示使用裝置本身物理螢幕的畫素,不會發生預設縮放
以上可解決適配問題，但是移動端同樣存在乙個新操作，就是橫豎屏。
通常使用js**去解決橫豎屏。
window.addeventlistener("orientationchange",function () );
//建議執行橫豎屏的事件都通過乙個偵聽完成，做乙個統一的管理；在螢幕橫豎屏切換完成之後再執行相應的事件
//定義橫屏顯示的樣式
@media screen and(orientation:landspace)
//定義豎屏顯示的樣式
@media screen and(orientation:portrait)
//某個尺寸的特殊樣式 豎屏時寬度為768px 符合一般ipad的條件
@media only screen and(orientation:portrait) and(device-width:768px)
這個方法工作量很大，複雜頁面不好處理。
rem = font-size of the root element
em = font-size of the element
只要根據不同的螢幕設定好根元素的font-size，其他使用rem單位的元素就會自適應相應的尺寸了。
那如何設定根元素的font-size呢。
1.js計算
通過js讀取螢幕寬度，然後計算出相應的尺寸，並設定根元素的font-size。
const ohtml = document.getelementsbytagname('html')[0]
const width = ohtml.clientwidth;
// 320px的螢幕基準畫素為12px
ohtml.style.fontsize = 12 * (width / 320) + "px";
@media screen and (min-width: 375px)
}@media screen and (min-width: 360px)
}@media screen and (min-width: 320px)
}html
fis3: fis3-postprocessor-px2rem
gulp stylus-px2rem
webpack px-to-rem-loader
//輸入
.element
//輸出
.element
前端 移動端適配
參考部落格 移動前端自適應適配布局解決方案 使用flex彈性布局，元素寬度自適應，高度固定為某個px值。這種適配方式是以html的font size值為基礎，所有元素的畫素大小都使用rem表示 除了font size以外 固定視口，縮放值為1.0 計算基礎font size值font size值的計...
前端技術 四 移動端適配
通過 查詢可以檢測當前網頁執行在什麼終端，可以有機會實現網頁適應不同終端的展示風格。關鍵字將 型別或多個 特性連線到一起做為 查詢的條件。引入方式 1.link標籤引入 12.css方式 media only screen and max width 640px 其它任意樣式表 123456常用特性...
前端技術之移動端適配
目錄 移動端適配 01.查詢 示例 檔位示例 02.rem rem適配原理 示例 03.rem 應用 04.實際應用 05.less的使用 安裝 變數 巢狀 運算06.解決方案 方案1方案2 推薦 方案對比 查詢 rem 作用 感受到螢幕的變化 可以根據螢幕不同的寬，從而獲得不同的樣式，然後實現不同...