第一課 移動端&響應式

標籤：

一、調試工具介紹（Chrome Emulation）

　　1.Device（裝置相關）

　　　　自訂尺寸、Network（網路類比）、UseAgent（瀏覽器資訊）、縮放

　　2.Media（媒體）

　　3.Network（網路類比）

　　4.Senors（感應器）

　　　　經緯度、陀螺儀

二、本機伺服器搭建

　　1.搭建伺服器 || HBuilder

　　2.同一網路下用裝置串連

　　　　*關閉防火牆

三、像素比

　　1.點 point（抽象單位）

　　2.像素渲染（柵格化）

　　3.物理像素（調整大小）

　　4.dpi、ppi

　　5.擷取像素比（window.devicePixelRatio）

四、viewport（視口）

　　1.width 裝置寬度[pixel_value | device-width]

　　2.user-scalable 是否允許縮放（no || yes）

　　3.initial-scale 初始比例

　　4.minimum-scale 允許縮放的最小比例

　　5.maximum-scale 允許縮放的最大比例

　　6.target-densitydpi （已淘汰）

　　7.動態控制比例 1/像素比

五、前期準備

　　1.布局單位介紹選擇

　　2.預設樣式處理

　　　　-webkit-tap-highlight-color:transparent;

　　　　input{-webkit-appearance:none;}/*去除input預設樣式*/

　　3.架構搭建

　　4.橫豎屏適配

　　　　getBoundingClientRect().width

　　　　resize.orientationchange

六、媒體查詢

　　all 所有媒體

　　braille 盲文觸覺裝置

　　embossed 盲文印表機

　　print 手持功能

　　projection 預覽列印

　　screen 彩屏裝置

　　speech ‘聽覺’類似的媒體類型

　　tty 不適用像素的裝置

　　tv 電視

七、媒體特徵

　　min-width 解析度寬度大於等於裝置值得時候識別

　　max-width 解析度寬度小於等於裝置值的時候識別

　　orientation:portraint 豎屏

　　orientation:landscape 橫屏

　　-webkit-min-device-pixel-radio:2 像素比

八、關鍵字

　　and 和、與（串連媒體特性）

　　not 排除指定媒體類型

　　only 指定某種特定的媒體類型（很多時候是用來對那些不支援媒體特性但卻支援媒體類型的裝置）

九、樣式引用

　　外聯樣式表 link[media="all and (min-width:600px)"]

　　@import @import url(index.css)all and (min-width:600px)

十、常規尺寸

　　@media all and (min-width:1200px){//大解析度（PC解析度、TV）}

　　@media all and (min-width:850px) and (max-width:1199px){//中等解析度（PC小解析度 || pad）}

　　@media all and (min-width:700px) and (max-width:849px){//pad解析度}

　　@media all and (min-width:480px) and (max-width:699px){//高解析度手機裝置 || 低解析度平板}

　　@media all and (max-width:479px){//手機裝置}

補充：

一、移動開發需求

　　1.讓頁面的寬度跟訪問裝置的寬度一致 device-width

　　2.不讓使用者進行頁面縮放 user-scalable = no

　　3.控制像素比

　　 （如何讓1px做1px的事情？a 1:1像素還原 b 儘可能的和裝置解析度一致）

　　   通過JS控制像素比：

　　　　<script>

　　　　　　//擷取像素比

　　　　　　var pixelRatio = 1/window.devicePixelRatio;

　　　　　　//通過JS動態設定視口（viewport）

　　　　　　document.write(‘<meta name = "viewport" content = "width = device-width,initial-scale = ‘+pixelRatio+‘,minimum-scale = ‘+pixelRatio+‘"/>‘)

　　　　</script>

二、移動布局步驟

　　1.確定尺寸（設計稿）並且還得再符合該尺寸的模擬器下進行第一次預覽

　　2.搭建大體架構

三、單位對比

　　px 絕對（固定）單位

　　　 缺點：任何情況下都是固定值，會導致布局在不同尺寸的裝置下錯位

　　% 相對單位（會有影響發生變化）相對於父級（自身）大小進行計算

　　　 缺點：能確定範圍的還是比較好計算的，對於不太好確定值的地方不好使用百分比，並且會導致變形

　　em 相對單位（會有影響發生變化）em=當前字型大小

　　    缺點：會根據當前容器字型大小發生變化，假如每個容器字型大小不一致，那麼計算會非常麻煩

　　rem r=root em=字型大小font size 相對單位 只依賴HTML字型大小

四、動態設定字型大小

　　<script>

　　　　//條件：尺寸越大，則字型越大，尺寸越小，則字型越小

　　　　//擷取html節點

　　　　var html = document.getElementByTagName(‘html‘[0]);

　　　　//擷取螢幕寬度

　　　　var pageWidth = html.getBoundingClientRect().width;

　　　　//螢幕寬度/固定數值=基準值

　　　　html.style.fontsize = pageWidth/10 + ‘px‘;

　　</script>

 

移動端固定定位的方法：

　　html{width:100%;height:100%;overflow:hidden;}

　　body{width:100%;height:100%;overflow:auto;}

　　需要定位的元素使用position:absolute;top:0;left:0;

 

第一課 移動端&響應式