從零開始學習前端開發 — 1三、響應式佈局以及移動端佈局

響 應 式 布 局

---

 

1、響應式佈局:寫一套css樣式能夠兼容多個終端設備，爲移動互聯網的開發作出了重要貢獻

優勢:一套樣式能夠兼容多個終端設備，靈活性更強

缺點：工做量增長，容易形成代碼冗餘，影響加載速度

　　核心原理:主要使用css3的媒體查詢實現不一樣設備的響應

2、媒體查詢

1.外聯式媒體查詢

<link rel="stylesheet" media="screen and (min-width:960px)" href="red.css"/>

<link rel="stylesheet" media="screen and (max-width:960px)" href="blue.css"/>

當屏幕窗口大於960px時，引入red.css文件，當屏幕窗口小於等於960px時，引入blue.css文件

2.內嵌式媒體查詢

@media screen and (min-width:960px){
body{
background:red;
}
}
@media screen and (min-width:640px) and (max-width:960px){
body{
background:blue;
}
}

當屏幕窗口大於960px時，body背景色爲紅色，當屏幕窗口大於640px,而且小於960px時，body背景色爲藍色

3、標準盒模型和怪異盒模型

標準盒模型=content+padding+border+margin

怪異盒模型=content+margin

注：怪異盒模型中，padding和border不計入總寬總高中

當沒有寫文檔聲明時，就會觸發某些瀏覽器的怪異模式

4、box-sizing的可選屬性值有哪些及其含義

1.box-sizing:border-box;

注：padding和border不會計入總寬，總高中（即怪異盒模型）

2.box-sizing:content-box;

注：padding和border要計入總寬，總高中（即標準盒模型）

注：box-sizing是css3新增的屬性，低版本IE瀏覽器不支持

主要應用在移動端

 移 動 端 布 局

---

 

1、移動端相關概念

1.屏幕尺寸

屏幕尺寸是指屏幕對角線的長度，單位爲英寸，1英寸=2.54釐米

iphone7 4.5寸

iphone7plus 5.5寸

2.屏幕分辨率

屏幕分辨率是指橫縱方向上的像素點數，單位爲px，咱們也把屏幕分辨率稱爲物理像素

常見移動端設備屏幕分辨率

iphone4 960px*640px

iphone5 1136px*640px

iphone6 1334px*750px

iphone7 1334px*750px

iphone6plus
=> 1920px*1080px
iphone7plus

3.屏幕像素密度:屏幕上每英寸能夠顯示的像素點數，稱爲屏幕像素密度，單位爲ppi

4.設備像素比DPR:指物理像素與邏輯像素的比值，也叫作設備像素比(DevicePixelRetio)

注：物理像素指屏幕分辨率

　　邏輯像素指設備尺寸

常見移動端設備尺寸：

iphone4 480px*320px dpr=2

iphone5 568px*320px dpr=2

iphone6 667px*375px dpr=2

iphone6plus 736px*414px dpr=3

5.移動端meta設置

默認狀況下可視窗口的寬度大於咱們移動端設備的寬度，此時咱們須要作以下設置：

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>

注：sublime設置viewport快捷鍵：meta:vp + tab鍵

2、常見移動端佈局方案

1.百分比佈局（流式佈局）：以百分比爲主要單位進行頁面佈局

特色：文字流式，控件彈性，圖片等比例縮放，頂部和底部無論分辨率怎麼變化，高度都不變

注：適用於頁面佈局比較簡單的移動端項目

典型案例：拉勾網

2.rem佈局(等比例縮放佈局)

特色：使用rem爲主要單位進行頁面佈局，很好的實現了在頁面在不一樣尺寸設備上等比例縮放

3.混合式佈局

特色：將多種佈局方式混合在一塊兒使用，實現移動端屏幕的適配

3、移動端經常使用到的相關單位

1.px

像素，相對於屏幕分辨率而言

2.em

相對於父元素字體大小的單位

1em = 16px

注：em是相對於父元素字體大小放大或縮小多少倍

因爲父元素字體大小不固定，因此不推薦使用em單位進行佈局

3.rem

相對於根元素字體大小的單位

注：因爲根元素(html)字體大小固定通常不會改變，因此推薦使用rem進行移動端佈局

1em = 16px = 12pt = medium

4.vw

vw是viewport width的縮寫，1vw = 視窗寬度的1% (設備寬度的1%)

vh 視窗高度

vmax vh和vw中較大的那個

vmin vh和vw中較小的那個

4、自定義字體

@font-face{
font-family:"自定義字體名稱";
src:url(字體文件路徑);
}

body{
font-family:"自定義字體名稱";
}