1、視口分為: 布局視口 視覺視口 理想視口
2、布局視口:
一般移動端裝置的瀏覽器都預設設定了乙個布局視口,為了解決早期pc端頁面在移動端上的顯示問題
蘋果 安卓 基本上設定這個視口的解析度980px
3、視覺視口:
你看到的網頁區域,指的是**的區域
通過縮放去操作視覺視口不會影響布局視口
4、理想視口:
2: 對裝置來說就是最理想的尺寸
3: 引入乙個meta標籤,通知瀏覽器進行對應的操作
4: meta標籤的主要目的就是為了使布局視口的寬度應該與理想視窗的寬度一致,就是裝置有多寬,布局視口就有多寬
width=device-width 當前的寬度與當前裝置的寬度一致
initial-scale=1 初始的縮放比例(預設為1)
minimum-scale=1 允許使用者縮放到的最小比例(預設為1)
maximum-scale=1 允許使用者縮放到的最大比例(預設為1)
user-scalable=no 使用者是否可以手動縮放(預設不允許) 因為我們不希望使用者去放大縮小頁面
注意: 移動端必須寫meta標籤,且是禁止使用者縮放
5、視口縮放:
在375px的裝置中截圖出來 到ps 中測量是750px
在ps中值比 裝置中的px值大一倍
6、物理畫素:
1:指的就是螢幕像是的最小的點,是真實存在,裝置廠商在生產裝置是就已經固定好了的,比如蘋果678 750*1334
2: 視網膜高畫質顯示屏,retina顯示屏,作用是把更多的物理畫素點壓縮至一塊螢幕裡,畫素點越密集,看得越清晰,
達到更高的分辨,提高清
了解: ppi: 每英吋所顯示的畫素點的密度
dpi: 每英吋所顯示的畫素點的點數
7、物理畫素比: dpr = 物理畫素 / 邏輯畫素
物理畫素:就是裝置所顯示的畫素(手機截圖 在ps中量取出來的畫素大小)
邏輯畫素: 頁面在css中書寫的畫素
移動端準備
查詢 media screen and max width 300px 使用 media 查詢，可以針對不同的 型別定義不同的樣式 media 可以針對不同的螢幕尺寸設定不同的樣式，特別是如果你需要設定設計響應式的頁面，media 是非常有用的。當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和...
移動端適配
js適配方案 function resizefun else body removeclass hightscreen shortscreen portrait var ratio window width window height if screenstate portrait else if ...
移動端適配
不論裝置寬度是多少，統一把布局視口設定成設計稿的寬度。假設設計稿寬度是375px。不管螢幕多大，都看作375px。width只能改變布局視口，不能改變視覺視口。定義設計稿的寬度 計算當前裝置的寬度document.documentelement.offsetwidth scale 裝置寬度 設計搞寬...