移動端基礎

2021-10-12 16:27:13 字數 835 閱讀 7916

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.資...