開發移動端web的一些知識

因爲智能機的普及，愈來愈多網頁支持移動端了，那麼如何解決適配移動端呢

在這總結一下本身的學習筆記

• viewport：虛擬的容器，僅在移動設備有效

<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0"/>

width=device-width：設置寬度爲設備寬度

initial-scale=1.0：初始縮放比例1.0

user-scalable=no：不容許用戶自行縮放

在使用viewport佈局中，網頁中的盒子寬度通常使用百分比設置專家號

• 點擊高亮效果

在移動端默認會出現點擊高亮效果，那麼如何去除其效果呢

-webkit-tap-highlight-color:transparent;/*清除點擊高亮效果*/

若是想加顏色，直接改變transparent

• 防止盒子寬度溢出

在移動端全部盒子須設置

box-sizing: border-box;

• 移動web開發和響應式開發的的區別

一、通常在已經有pc端web ，單獨開發移動web；針對移動端，開發效率高；只適配移動設備，pad體驗很差；代碼至關簡潔，加載速度快。

二、通常新建的網站，適配各類終端；開發效率低；代碼相對複雜，加載速度慢。

• 常見的幾種移動站點佈局

1. 流式佈局
2. 媒體查詢
3. rem自適應