響應式布局:
為了適應不同的裝置,解析度
不同的裝置(pc電腦端 平板電腦 手機端)
x 寬度
500px<= x <800px css 1
800px<= x <1000px css 2
1000px<= x <1500px css 3
響應式的優勢:
1: 一套專案,能適應不同的裝置,靈活
2: 能夠快捷解決多裝置顯示適應問題
3: 從顯示上來看: 使用者體驗會更好一點
響應式的缺點:
1: 繁瑣,**量大,會出現隱藏無用的元素,載入時間加長
2: 開發成本偏高(不同的專案組)
開發一套產品不能滿足要求一套圖也不能滿足要求(移動端 pc端的)
前端布局: 一套布局方案是不能滿足資料: pc 移動端
3: 相容不同的裝置,相容性工作量加大,效率低下
4: 這是乙個折中的解決方案,多方面的因素影響達不到最佳的效果
5: 會出現使用者混淆
為什麼講響應式:
利用響應式的思想,做移動端專案的適配
視口:就是瀏覽器顯示頁面內容的螢幕區域
視口分為: 布局視口 視覺視口 理想視口
布局視口:
一般移動端裝置的瀏覽器都預設設定了乙個布局視口,為了解決早期pc端頁面在移動端上的顯示問題
蘋果 安卓 基本上設定這個視口的解析度980px
視覺視口:
你看到的網頁區域,指的是**的區域通過縮放去操作視覺視口不會影響布局視口
理想視口:
1: 是**在移動裝置的瀏覽器中最理想的一狀態(瀏覽和閱讀寬度設定的)
2: 對裝置來說就是最理想的尺寸
3: 引入乙個meta標籤,通知瀏覽器進行對應的操作
4: meta標籤的主要目的就是為了使布局視口的寬度應該與理想視窗的寬度一致,就是裝置有多寬,布局視口就有多寬
width=device-width 當前的寬度與當前裝置的寬度一致
initial-scale=1 初始的縮放比例(預設為1)
minimum-scale=1 允許使用者縮放到的最小比例(預設為1)
maximum-scale=1 允許使用者縮放到的最大比例(預設為1)
user-scalable=no 使用者是否可以手動縮放(預設不允許) 因為我們不希望使用者去放大縮小頁面
注意: 移動端必須寫meta標籤,且是禁止使用者縮放
視口縮放:
在375px的裝置中截圖出來 到ps 中測量是750px
在ps中值比 裝置中的px值大一倍
物理畫素:
1:指的就是螢幕像是的最小的點,是真實存在,裝置廠商在生產裝置是就已經固定好了的,比如蘋果678 750*1334
2: 視網膜高畫質顯示屏,retina顯示屏,作用是把更多的物理畫素點壓縮至一塊螢幕裡,畫素點越密集,看得越清晰,達到更高的分辨,提高清
了解: ppi: 每英吋所顯示的畫素點的密度
dpi: 每英吋所顯示的畫素點的點數
重點:物理畫素比: dpr = 物理畫素 / 邏輯畫素
物理畫素:就是裝置所顯示的畫素(手機截圖 在ps中量取出來的畫素大小)
邏輯畫素: 頁面在css中書寫的畫素
常見的設計稿:
設計圖 640px dpr 2 320
750px dpr 2 375
1125px dpr 3
常見的單位:
pxem
pt(磅) 更多應用於安卓設定
deg 角度
%rem: 跟隨html的font-size:;值的大小
預設狀態下 1rem = 16px
vw: 視口的寬度 width:100vw; 佔滿整個視口的寬度
能夠隨著視口的寬度變化而變化
100vw = 滿屏 = 320px
100vw = 滿屏 = 375px
vh: 視口的高度 height:100vh; 佔滿整個視口的高度
能夠隨著視口的高度變化而變化
vmin: 作比較, 視窗的寬高誰小,誰小就按照誰顯示
vmax: 作比較, 視窗寬高誰大,誰大就按照誰顯示
使用vw是為了讓元素的大小能受到螢幕大小的變化而控制
讓整體使用rem的單位,跟隨html中font-size的設定
640設計圖:
100vw = 滿屏 = 320px
1vw = 3.2px
?vw = 100px
100/3.2 = 31.25vw
得出 31.25vw = 100px
750設計圖
100vw = 滿屏 = 375px
100vw = 375px
1vw = 3.75px
?vw = 100px
100/3.75 26.66666666…
得出 26.67 = 100px
假設 1rem = 120px
1vw = 3.75px
?vw = 120px
120/3.75= 32vw
得出 32vw = 120px
記住:如果使用vw + rem實現頁面布局適配
設計圖是750px html
設計圖是640px html
移動端布局
預設以寬度為640px的設計稿為基準頁面，然後通過js獲取當前顯示裝置的尺寸，對應的調整 html 標籤的font size大小，從而實現通過以rem為單位的移動端布局適配。function win,doc function layoutcalc html.style.fontsize rem px...
移動端布局
css畫素與裝置畫素 二者的區別在於前者是抽象的，用於瀏覽器渲染頁面，而後者是裝置的最小物理單位。可參考 a pixel is not a pixel is not a pixel 進行理解。視口 移動端瀏覽器有兩個視口，即可見視口與布局視口，二者的區別在於前者為基於移動裝置螢幕的實際寬度，而後者為...
移動端布局
瀏覽器上 用來顯示網頁的那部分區域了 1 設定 view 有 init scale 頁面的初始縮放值 為數字 width viewport的寬度 height viewport的高度 mininum scale 允許使用者縮放最小值 maxinum scale 允許使用者縮放最大值 user sca...