1、無論是pc端還是移動端，開發出來的頁面都是執行在瀏覽器上的；
2、移動端裝置的瀏覽器大多是基於webkit核心，屬於高階瀏覽器 支援h5 c3特性；
視口概念
①： pc端視口取決於瀏覽器大小（html）---螢幕大小
此時就會出現乙個問題： 頁面中有些內容看不清。思考： 可不可以將移動端的視口等於手機裝置寬度？
移動端開發基本
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
a ul
textarea
input
須知： 所有瀏覽器的字型大小預設均為16px
經驗值積累：
1）當乙個塊級元素設定絕對定位或者固定定位後，由塊級元素變成行內塊元素。此時需 width:100%
2) 移動web頁面中header
header布局：左右-絕對定位，中間搜尋框 100%，兩邊用padding 撐開；
關於蘋果手機的螢幕寬度介紹
①iphone 5, iphone 5s 320px 2(dpr)
②iphone 6 375px 2(dpr)
③ iphone 6s ,iphone 6s+ 414px 3(dpr)
1、快捷鍵m，選區工具測量後；如果選擇不太精確，則選擇-變換選區重新調整
移動端web開發
viewport content width device width,user scalable no,initial scale 1.0,maximum scale 1.0,minimum scale 1.0 width 設定視口寬度 initial scale 初始化縮放比，大於0的數字 ma...
移動端Web開發
移動端web開發與pc端的web開發有尺寸上的不同，手機螢幕大小有很多種，因此尺寸方面有些要注意的。1.字型 採用js動態設定字型大小的方法 思路如下 螢幕寬度 640px,則font size 100px 螢幕寬度 640px,則font size 100 寬度 640px 字型單位為rem 在b...
移動端web開發
互動優化 1px dpr dpr dp viewport使手機瀏覽器先排版正確再縮放 移動web最佳設定 viewport content width device width,initial scale 1,user scalable no 相容性問題根據html的font size，基值設dev...