基礎回顧(六) 移動端開發基礎

2021-10-13 20:15:15 字數 764 閱讀 7504

瀏覽器現狀

手機螢幕現狀瀏覽器顯示頁面內容的螢幕區域

布局視口(layout viewport)

將pc端尺寸的頁面通過壓縮顯示在移動端視窗

視覺視口(visual viewport)

使用者正在看到的**的區域,通過縮放去操作視覺視口,但不會影響布局視口,仍保持原來的寬度

理想視口(ideal viewport)

最理想的瀏覽和閱讀寬度而定的,需要手動新增視口標籤通知瀏覽器操作,裝置有多寬,我們的布局視口就有多寬

物理畫素點

螢幕顯示的最小顆粒,是物理真實存在的,廠商出廠時就已經設定好了

物理畫素比

乙個px能顯示的物理畫素點的個數,也稱螢幕畫素比

單獨製作移動端頁面(主流)

響應式頁面相容移動端(其次)

移動端常見問題

css的初始化normalize.css

css3的盒子模型box-sizing:border-box

響應式單獨

響應式下期內容更精彩o~流式布局

移動端基礎

1.視口 視口就是瀏覽器顯示頁面內容的螢幕區域 視口分為布局視口 視覺視口 理想視口 移動端布局想要的是理想視口就是手機螢幕有多寬,我們的布局視口就 有多寬 通過給移動端頁面增加meta視口標籤 2.meta視口標籤 viewport 視口標籤 content width device width ...

移動端基礎

移動端瀏覽器我們主要針對webkit核心進行相容 現在移動端碎片化比較嚴重,解析度和螢幕尺寸大小不一 1 移動端除錯方法 視口 viewport 就是瀏覽器顯示頁面內容的螢幕區域。視口可分為布局視口 視覺視口和理想視口 2.1布局視口 layout viewport 標準寫法 屬性解釋說明 widt...

移動端基礎

移動端瀏覽器我們主要針對webkit核心進行相容 現在移動端碎片化比較嚴重,解析度和螢幕尺寸大小不一 視口 viewport 就是瀏覽器顯示頁面內容的螢幕區域。視口可分為布局視口 視覺視口和理想視口 屬性解釋說明 width 寬度設定的是viewport寬度,可以設定device width 寬度是...