移动WEB页面开发
一、如今的移動行業:
1.移動互聯網的發展
2.智能手機迅速發展
3.移動WEB應用的發展
4.移動端的開發需求逐年增加
二、移動網頁開發和pc網頁開發的區別:
1.終端設備及瀏覽器
2.分辨率
3.視口
4.輸入特性:
鼠標、鍵盤
觸摸
三、PC端開發瀏覽器:
Chrome、IE、火狐
四、移動瀏覽器類型:
內置瀏覽器、可下載瀏覽器、代理瀏覽器、WebView
五、谷歌瀏覽器測試環境:
1.Emlation:
(1)Device:可以切換設備和型號
(2)Resolution:設備像素
(3)Device pixel ratio:設備像素比
2.NetWork conditions:
(1)Disk cache:磁盤緩沖,默認是不緩沖的
(2)NetWork throttling:網絡節流,單擊下拉菜單,可以模擬網絡測試。
3.Sensors:
(1)Geolocation:模擬地理定位,shanghai,london、莫斯科、東京
lat:經度
lon:緯度
(2)orientation:模擬陀螺儀,這個功能一般用于搖一搖等有重力感應的場景。
α:設備繞Z軸旋轉的數值
β:設備繞X軸旋轉的數值
γ:設備繞Y軸旋轉的數值
六、移動端視口:
1.布局視口:在移動端上,視口與移動瀏覽器屏幕寬度不在關聯,而是完全獨立的。(在桌面上瀏覽器上,瀏覽器窗口就是約束CSS布局窗口,他決定了用戶可以看到什么)
2.視覺視口:在手機上,桌面視口被拆分為兩個,布局視口會限制CSS布局,視覺視口會決定用戶能看到什么。
3.理想視口:它明確了特定瀏覽器布局視口的理想尺寸。
七、視口標簽:
八、設備像素比:
1.設備像素:是設備屏幕的物理像素,任何設備的物理像素都是固定的。
2.設備像素比:設備像素個數和理想視口的比。
3.DPI:用像素的數量除以屏幕的以英寸為單位的寬度可以得到你的設備每英寸的點數,簡稱DPI。
九、移動網頁開發和PC網頁開發的異同:
1.不同點:
(1)適配不同的分辨率和屏幕尺寸
(2)兼容的瀏覽器
2.相同點:
布局結構
使用的技術
十、使用相對長度單位em來布局網頁內容:
1.em的值并不是固定的
2.em會繼承父級元素的字體的大小
十一、使用相對長度單位rem來布局網頁內容:
1.rem的值并不是固定的
2.rem的值是相對于根節點html而發生變化的(與父節點無關)
總結
- 上一篇: 电脑一直配置windowsupdate失
- 下一篇: 在电脑上实现滚动截屏/截取长图的方法如何