1.視口:
視口就是瀏覽器顯示頁面內容的螢幕區域
視口分為布局視口、視覺視口、理想視口
移動端布局想要的是理想視口就是手機螢幕有多寬,我們的布局視口就 有多寬
通過給移動端頁面增加meta視口標籤
2.meta視口標籤
"viewport"
//視口標籤 content="width=device-width //viewport寬度,
initial-scale=
1.0//初始縮放比,maximum-scale=1.0//最大縮放比, minimum-scale=1.0//最小縮放比
, user-scalable=no//使用者是否可以縮放">
3.物理畫素與物理畫素比
物理畫素指的是螢幕顯示的最小顆粒,是物理真實存在的。
我們開發時1px不是一定等於1物理畫素
pc端頁面1px等於1個物理畫素,但是移動端不盡相同
乙個px能顯示的物理畫素點個數,稱為物理畫素比或螢幕畫素比
4.二倍圖
我們需要乙個5050畫素(css畫素)的 直接放到我們的iphone8 裡面會放大2倍 100 100 就會模糊
我們採取的是 放乙個 100* 100 然後手動的把這個 縮小為 50* 50 (css畫素)
我們準備的 比我們實際需要的大小 大2倍,這就方式就是 2倍圖
5.css3盒模型
傳統盒子模型= width + border + padding =box-sizing: content-box
padding 和 border 不會再撐大盒子了= box-sizing: border-box;
移動端基礎
移動端瀏覽器我們主要針對webkit核心進行相容 現在移動端碎片化比較嚴重,解析度和螢幕尺寸大小不一 1 移動端除錯方法 視口 viewport 就是瀏覽器顯示頁面內容的螢幕區域。視口可分為布局視口 視覺視口和理想視口 2.1布局視口 layout viewport 標準寫法 屬性解釋說明 widt...
移動端基礎
移動端瀏覽器我們主要針對webkit核心進行相容 現在移動端碎片化比較嚴重,解析度和螢幕尺寸大小不一 視口 viewport 就是瀏覽器顯示頁面內容的螢幕區域。視口可分為布局視口 視覺視口和理想視口 屬性解釋說明 width 寬度設定的是viewport寬度,可以設定device width 寬度是...
移動端測試基礎
二 monkey 1.連線夜神模擬器 adb connect 127.0.0.1 62001 2.連線安卓實機 開啟手機的開發這模式,用資料線 能夠資料傳輸 連線 3.adb devices 檢視已連線的裝置 4.adb get state 檢視已連線裝置的狀態 ps adb連不上可能是因為 1.資...