1、無論是PC端還是移動端，開發出來的頁面都是運行在瀏覽器上的；

2、移動端設備的瀏覽器大多是基於webkit內核，屬於高級瀏覽器 支持H5 C3特性；

視口概念

①： PC端視口取決於瀏覽器大小（HTML）---屏幕大小

② ：移動端視口由手機廠商規定為980，因為當時很多網站的版心都是980並根據手機設備寬度等比縮小網頁。

此時就會出現一個問題： 頁面中有些內容看不清。思考： 可不可以將移動端的視口等於手機設備寬度？

移動端開發基本

<meta name="viewport"

content="width=device-width" ，//將視口的寬度等於設備寬度

user-scalable = "no"， //不允許用戶用手指縮放大小

initial-scale="1.0",//初始化縮放比例為1，不縮放

maximum-scale="1.0",//網頁最大縮放比例

minimun-scale="1.0" //網頁最小縮放比例

移動端布局方式

1、流式布局--百分百布局

基本點：width，padding,margin屬性用百分百的形式表示。

主要：在百分百世界中，padding,margin四個方向都是相對於父級元素的高度。

實戰項目介紹

1、創建文件架構 css,js,images,index.html

2、頁面布局

從上往下，從左往右，從外往裏

3、公共樣式設置

*，*::before,*::after { margin: 0; padding: 0 ;box-sizing: border-box}

a { color: #000; text-decoration: none;

-webkit-tap-highlight-color:transparent; //移動端特有的，去除手機輕敲背景高亮

}

body { background: #f5f5f5; font-size: 12px ;}

ul { list-style:none; }

textarea { resize:none; //禁止拖動文本域，註意：現在瀏覽器不支持；但是行內樣式支持}

input { border: none; outline: none;}

須知： 所有瀏覽器的字體大小默認均為16px

經驗值積累：

1）當一個塊級元素設置絕對定位或者固定定位後，由塊級元素變成行內塊元素。此時需 width:100%

2) 移動web頁面中header { height: 40px; }

header布局：左右-絕對定位，中間搜索框 100%，兩邊用padding 撐開；

3) 移動端放置圖片同PC端不同，原因： 屏幕像素密度比= 物理像素/CSS像素=window.devicePixelRatio
產生原因：蘋果 RETINA

關於蘋果手機的屏幕寬度介紹

①iphone 5, iphone 5s 320px 2(dpr)

②iphone 6 375px 2(dpr)

③ iphone 6s ,iphone 6s+ 414px 3(dpr)

結論： 通常準備3倍圖片大小的高清圖

PS中測量圖片大小的方法：

1、快捷鍵M，選區工具測量後；如果選擇不太精確，則選擇-變換選區重新調整

精靈圖的操作：1、background:url 2、background-size(原圖片縮小2倍) 3、background-position(精確定位-縮小2倍)

移動端web開發