移動端適配技術構成：

• rem
• vw ，vh
• calc（）
• media queries 媒體查詢
• 百分比布局
• flex，grid
• flexible image 彈性圖片

1.設置 Meta 標簽
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

2.前端單位

• px
• em：一個m的寬度，就是這樣，絕不是一個漢字的寬度
• pt，ex : 根本沒人用
• vw：視口（viewport）寬度
• vh：視口（viewport）高度
• rem：root em 根元素即html的font-size，如果 html的font-size：16px；那么 1rem = 16px

rem 與 em 的區(qū)別：rem 參考根元素的font-size，em參考自己的font-size，也可能是繼承得來的

3.vw與vh 輕輕松松寫頁面

將視口分為100份，50vw表示占50份，vh同理

4.calc

calc（）函數可以動態(tài)計算長度。

示例：動態(tài)計算寬度

.box{width:calc(100% - 100px);margin: 20px auto; }

5.rem模擬 vw

一切以寬度為基準，就能完美還原設計稿，目前所有的單位除了 vw 都和寬度無關，可是其兼容性還不夠。 2018.11.5測

必要時用rem來模擬

• 純js：

let VW = window.innerWidth;document.documentElement.style.fontSize = VW/10 + 'px';

js里面除以10，所以頁面分為10等分，5rem表示占一半

• 使用scss將px自動轉化為rem，就不用一個一個算rem了~

6.通過媒介查詢來設置樣式

• 直接指定：

@media screen and (max-width: 980px) {#head { … }#content { … }#footer { … }}

• 設置多種試圖寬度

@media only screen and (min-width: 50em){大于800的屏幕} 0-800@media only screen and (min-width: 30em) and (max-width: 50em){481-800的中屏幕} 480-800@media only screen and (max-width: 30em){小于480的小屏幕} 0-480

• 使用link 標簽的 media 可以指定寬度的css文件

<link rel="stylesheet" href="./mobile.css" media="screen and (max-width:320px)">

• 斷點選擇原則

0-480 小屏幕

481-800 中屏幕

801-1400 大屏幕

1400+ 巨屏幕

7.寬度需要使用百分比

雖然高度一般都是撐開的，而不是直接指定，但難免有特殊情況，其他需求，要百分比布局怎么辦？？所以復雜情況慎用。

#head { width: 100% }#content { width: 50%; }

8.flex布局 森儀：flex布局深入淺出

9.處理圖片縮放的方法

html或css控制

1. 設置圖片src src (優(yōu)先)

img { width: auto; max-width: 100%; }<img src="image.jpg" src-600px="image-600px.jpg" src-800px="image-800px.jpg" alt="">

js控制:

var W = $(window).width();if(W > 800){$("img").attr("src",$("img").data("src-800px"))}else if(W > 600){$("img").attr("src",$("img").data("src-600px"))}

2.最牛的是picture標簽，兼容性害怕

<picture><source media="(min-width:320px) and (max-width:480px)" srcset="ad001.png"><source media="(min-width:481px) and (max-width:800px)" srcset="ad001-m.png"><img src="ad001-l.png" alt=""></picture>

其他：

1.瀏覽器默認字體大小16px；谷歌最小字號默認12px，所以即使寫了font-size:6px; 顯示也是12px，可以改變設置；（點擊內容設置）

2.手機端的交互方式不一樣

• 沒有 hover
• 有 touch 事件，已經封裝好的： jquery.swipe vue.swipe
• 沒有 resize
• 沒有滾動條

Appendix：https://developer.mozilla.org/zh-CN/docs/Web/CSS/length

超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生

總結

以上是生活随笔為你收集整理的layui移动端适配_移动端适配方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。