一 移動web的基礎知識
1.meta 標籤
initial-scale：設定頁面的初始縮放；
minimum-scale：最小縮放；
maximum-scale：最大縮放；
user-scalable：使用者能否縮放。
2.設計移動web
方案一：根絕裝置的實際寬度來設計；
方案二：根據裝置的物理畫素dp等於抽象畫素px來設計。1畫素邊框和高畫質都不需要額外處理。
二 移動web 布局
方案一：使用彈性盒子flex布局，通過display：flex;然後通過flex:num來實現；
flex也可用於混合劃分，一部分固定寬度，其他不分使用flex。
方案二：使用響應式布局respond
主要是使用**查詢：
@media screen and (max-width:1024px)width/height 視口的寬高
device-width/device-height 裝置的寬高
orientation 檢查裝置處於橫屏(landscape)還是豎屏(portrait)
**查詢存在一定的bug,不能相容所有ping所以使用
a.百分比布局；
b.彈性；
img特殊樣式處理：
一畫素邊框問題的處理：
通用的方式是通過scaley(.5)來實現，**如下：
li
li + li:before
相對單位rem
font-size 不建議使用rem,同理一些固定的元素的特性都不建議使用rem;
多行文字溢位：
單行文字溢位，對title類的使用非常多，**如下：
三 終端互動優化
移動web頁面的click事件相應要慢300ms,解決300ms延遲，使用tap事件代替click事件，使用移動框架庫zepto.js。
touch事件中的核心事件：
touchstart/touchend/touchmove/touchcancel
除常見的事件屬性外，觸控事件包含專有的觸控屬性，
touches：跟蹤觸控操作的touch物件陣列；
targettouches:特定事件目標的touch物件陣列；
changetouches:上次觸控改變的touch物件陣列；
touch事件的bug,在android只會觸發一次touch start，一次touchmove,touch end不會觸發
解決方案：
在touchmove中加入：event.preventdefaule()可fixedbug,但是會導致默寫行為不發生，例如，event.preventde****t()。
彈性滾動的區域性滾動開啟,僅限於ios：
注意android不支援原生的彈性滾動
，但可以借助第三方庫iscroll來實現。滾動的時候gif和定時器都會失效。
移動Web開發基礎概念
2 視口 viewport 3 css屬性之box sizing 1.1 解析度以物理畫素作為基準，不同裝置的物理畫素單位大小不同 1.2 物理畫素 裝置畫素 物理畫素只與裝置有關 1.3 css畫素 邏輯畫素 實際開發中使用的畫素 1.4 裝置畫素比 dpr dpr 物理畫素 css畫素 dpr ...
基礎回顧（六） 移動端開發基礎
瀏覽器現狀 手機螢幕現狀瀏覽器顯示頁面內容的螢幕區域 布局視口 layout viewport 將pc端尺寸的頁面通過壓縮顯示在移動端視窗 視覺視口 visual viewport 使用者正在看到的 的區域，通過縮放去操作視覺視口，但不會影響布局視口，仍保持原來的寬度 理想視口 ideal view...
移動Web開發基礎 比例盒子
上篇在移動web開發基礎 百分比 flex布局方案中說到了比例盒子的實現，因為在移動端，需要適應各種螢幕寬度的裝置，所以我們的以及其他一些元素需要根據螢幕寬度自適應的等比例縮放，這裡就需要用到比例盒子的布局方法。接下來讓我們一起來了解下實現比例盒子的幾種方法吧！這裡會介紹四種實現方式，分別是用css...