**查詢
@media screen and (max-width: 300px) }
使用 @media 查詢，可以針對不同的**型別定義不同的樣式
@media 可以針對不同的螢幕尺寸設定不同的樣式，特別是如果你需要設定設計響應式的頁面，@media 是非常有用的。
當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。
all 用於所有裝置
screen 用於電腦螢幕，平板電腦，智慧型手機等。
重點設定 viewport 是使用者網頁的可視區域 width = device-width:寬度等於當前裝置的寬度 initial-scale:初始的縮放比例(預設設定為1.0) minimum-scale:允許使用者縮放到最小的比例(預設為1.0) maximum-scale:允許使用者縮放到最大的比例(預設為1.0) user-scalable:使用者是否可以手動縮放(預設設定為no，因為我們不希望使用者放大縮小頁面) 物理畫素:ps中世紀測量出來的畫素大小 邏輯畫素:css中應該寫出來的畫素大下 裝置畫素比:dpr = 物理畫素/邏輯畫素
常見單位
px:具體的畫素單位
em:跟父元素的字型大小有關
rem:跟根元素的字型大小有關
視窗寬度:vw
100vw = 滿屏寬度
視窗高度:vh
100vh = 滿屏高度
vmax:瀏覽器寬度和高度誰大聽誰的
vmin:瀏覽器寬度和高度誰小聽誰的
% 百分比
移動端適配準備
1 視口分為 布局視口 視覺視口 理想視口 2 布局視口 一般移動端裝置的瀏覽器都預設設定了乙個布局視口,為了解決早期pc端頁面在移動端上的顯示問題 蘋果 安卓 基本上設定這個視口的解析度980px 3 視覺視口 你看到的網頁區域,指的是 的區域 通過縮放去操作視覺視口不會影響布局視口 4 理想視口...
移動端工作準備
一 meta標籤的設定 視口1 1比例 禁止使用者縮放 二 dpr 裝置畫素比例 1 dpr 物理畫素 把手機上截圖放在ps中量取的大小 邏輯畫素 css去設定的畫素 2 dpr怎麼獲取 根據ui設計圖而定 絕大部分拿到的設計圖的大小 750px 640px 針對性對dpr進行獲取 如果設計圖為64...
移動端專案準備工作
meta name viewport content width device width,initial scale 1.0,minimum scale 1.0,maximum scale 1.0,user scalable no meta name format detection conten...