瀏覽器現狀
手機螢幕現狀瀏覽器顯示頁面內容的螢幕區域
布局視口(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 寬度是...