一锦秒、流式布局

1.1 meta標(biāo)簽

最標(biāo)準(zhǔn)的viewport設(shè)置

• 視口寬度和設(shè)備保持一致
• 視口的默認(rèn)縮放比例1.0
• 不允許用戶自行縮放
• 最大允許的縮放比例1.0
• 最小允許的縮放比例1.0

二、二倍圖

2.1 物理像素&物理像素比

物理像素點(diǎn)指的是屏幕顯示的最小顆粒爬骤，是物理真實(shí)存在的。這是廠商在出廠時(shí)就設(shè)置好了悯周，比如蘋果8 是 750 * 1334(豎著最多能顯示750個(gè)像素點(diǎn))

我們實(shí)際開發(fā)時(shí)候的1px不是一定等于1個(gè)物理像素的搔确，只有PC端和早期的移動(dòng)端屏幕 1CSS像素=1物理像素

一個(gè)px的能顯示的物理像素點(diǎn)的個(gè)數(shù)，稱為物理像素比或屏幕像素比娃惯，如果把1張100*100的圖片放到手機(jī)里面會(huì)按照物理像素比給我們縮放
lRetina（視網(wǎng)膜屏幕）是一種顯示技術(shù)跷乐，可以將把更多的物理像素點(diǎn)壓縮至一塊屏幕里，從而達(dá)到更高的分辨率趾浅，并提高屏幕顯示的細(xì)膩程度愕提。

2.2 多倍圖

所以實(shí)際運(yùn)用中一張 50px * 50px 的圖片，在手機(jī)或 Retina 屏中打開皿哨，按照viewport設(shè)置物理像素比會(huì)放大倍數(shù)浅侨，這樣會(huì)造成圖片模糊。我們準(zhǔn)備的圖片是我們實(shí)際需要的2倍（100px * 100px）证膨，再手動(dòng)設(shè)置樣式為50px * 50px如输，這就是二倍圖解決高清設(shè)備圖片模糊問題的方式。工作中UI會(huì)給我們尺寸較大的UI設(shè)計(jì)圖央勒，當(dāng)用到圖片需要切圖的時(shí)候不见，按照手機(jī)實(shí)際的分辨率（手機(jī)為750px，開發(fā)尺寸為375崔步，就把設(shè)計(jì)稿縮放成750px）縮放設(shè)計(jì)圖切圖即可稳吮。同時(shí)，寫樣式測(cè)量設(shè)計(jì)圖上尺寸的時(shí)候需要除以2井濒。

現(xiàn)在還存在3倍圖和4倍圖的情況灶似，實(shí)際開發(fā)還是使用通常二倍圖慎陵。因?yàn)閕Phone 8 的影響背景圖片注意縮放問題。

2.3 背景縮放background-size

background-size 屬性規(guī)定背景圖像的尺寸

background-size: 背景圖片寬度 背景圖片高度;

單位： 長(zhǎng)度|百分比|cover|contain;

• cover把背景圖像等比拉伸擴(kuò)展至足夠大喻奥，以使背景圖像完全覆蓋背景區(qū)域席纽。可能會(huì)有部分背景圖片超出盒子而顯示不全撞蚕。

• contain把圖像圖像等比拉伸擴(kuò)展至最大尺寸润梯，等其鋪陳寬度等于當(dāng)前盒子寬度（或者鋪陳高度等于盒子高度）就不再拉伸，可能盒子會(huì)有部分背景圖片沒有鋪陳到空缺的地方甥厦。

因此想要背景圖拉伸并正好適應(yīng)盒子尺寸纺铭，就寫background-size: 100% 100%;
如果背景圖是精靈圖，需要先把圖片縮放成原來(lái)的一半（并不修改保存只是測(cè)量需要）來(lái)測(cè)量background-position的值刀疙，background-size也寫精靈背景圖原尺寸（具體像素）的一半

三舶赔、移動(dòng)開發(fā)選擇和技術(shù)解決方案

3.1 移動(dòng)端技術(shù)解決方案

移動(dòng)端公共樣式

移動(dòng)端 CSS 初始化推薦使用 normalize.css

• 保護(hù)了有價(jià)值的默認(rèn)值

• 修復(fù)了瀏覽器的bug

• 是模塊化的

• 擁有詳細(xì)的文檔

官網(wǎng)地址： http://necolas.github.io/normalize.css/

3.2 移動(dòng)端大量使用 CSS3盒子模型box-sizing

傳統(tǒng)模式寬度計(jì)算：盒子的寬度 = CSS中設(shè)置的width + border + padding

CSS3盒子模型： 盒子的寬度= CSS中設(shè)置的寬度width 里面包含了 border 和 padding

也就是說(shuō)，CSS3中的盒子模型谦秧， padding 和 border 不會(huì)撐大盒子了

/*CSS3盒子模型*/
box-sizing: border-box;
/*傳統(tǒng)盒子模型*/
box-sizing: content-box;

移動(dòng)端可以全部使用 CSS3 盒子模型

而PC端如果完全需要兼容竟纳，我們就用傳統(tǒng)模式，如果不考慮兼容性疚鲤，我們就選擇 CSS3 盒子模型

3.3 移動(dòng)端特殊樣式

    /*CSS3盒子模型*/
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    /*點(diǎn)擊高亮我們需要清除清除  設(shè)置為transparent 完成透明*/
    -webkit-tap-highlight-color: transparent;
    /*在移動(dòng)端瀏覽器默認(rèn)的外觀在iOS上加上這個(gè)屬性才能給按鈕和輸入框自定義樣式*/
    -webkit-appearance: none;
    /*禁用長(zhǎng)按頁(yè)面時(shí)的彈出菜單*/
    img,a { -webkit-touch-callout: none; }

四锥累、移動(dòng)端常見布局

移動(dòng)端單獨(dú)制作

• 流式布局（百分比布局）
• flex 彈性布局（強(qiáng)烈推薦）
• less+rem+媒體查詢布局
• 混合布局

響應(yīng)式

• 媒體查詢
• bootstarp

流式布局

流式布局，就是百分比布局集歇，也稱非固定像素布局桶略。

通過(guò)盒子的寬度設(shè)置成百分比來(lái)根據(jù)屏幕的寬度來(lái)進(jìn)行伸縮，不受固定像素的限制诲宇，內(nèi)容向兩側(cè)填充际歼。

流式布局方式是移動(dòng)web開發(fā)使用的比較常見的布局方式。

flex彈性布局

1. 傳統(tǒng)布局和flex布局對(duì)比

• pc端瀏覽器支持情況比較差
• IE11或更低版本不支持flex或僅支持部分

2. flex布局原理

• flex 是 flexible Box 的縮寫姑蓝，意為"彈性布局"鹅心，用來(lái)為盒狀模型提供最大的靈活性，任何一個(gè)容器都可以指定為 flex 布局它掂。
• 當(dāng)我們?yōu)楦负凶釉O(shè)為 flex 布局以后巴帮，子元素的 float溯泣、clear 和 vertical-align 屬性將失效虐秋，且都將默認(rèn)轉(zhuǎn)化成行內(nèi)塊元素（不需要浮動(dòng)就默認(rèn)在行內(nèi)顯示，并且可以設(shè)置寬高）垃沦。
• flex布局又叫伸縮布局 客给、彈性布局 、伸縮盒布局 肢簿、彈性盒布局
• 采用 Flex 布局的元素靶剑，稱為 Flex 容器（flex container）蜻拨，簡(jiǎn)稱"容器"。它的所有子元素自動(dòng)成為容器成員桩引，稱為 Flex 項(xiàng)目（flex item）缎讼，簡(jiǎn)稱"項(xiàng)目"。

總結(jié)：就是通過(guò)給父盒子添加flex屬性坑匠，來(lái)控制子盒子的位置和排列方式

3. 父項(xiàng)常見屬性

• flex-direction：設(shè)置主軸的方向
• justify-content：設(shè)置主軸上的子元素排列方式
• flex-wrap：設(shè)置子元素是否換行
• align-content：設(shè)置側(cè)軸上的子元素的排列方式（多行）
• align-items：設(shè)置側(cè)軸上的子元素排列方式（單行）
• flex-flow：復(fù)合屬性血崭，相當(dāng)于同時(shí)設(shè)置了 flex-direction 和 flex-wrap

3.1 flex-direction設(shè)置主軸的方向

• 在 flex 布局中，是分為主軸和側(cè)軸兩個(gè)方向厘灼，同樣的叫法有 ： 行和列夹纫、x 軸和y 軸
• 默認(rèn)主軸方向就是 x 軸方向，水平向右
• 默認(rèn)側(cè)軸方向就是 y 軸方向设凹，水平向下

• 注意： 主軸和側(cè)軸是會(huì)變化的舰讹，就看 flex-direction 設(shè)置誰(shuí)為主軸，剩下的就是側(cè)軸闪朱。而我們的子元素是跟著主軸來(lái)排列的

3.2 justify-content 設(shè)置主軸上的子元素排列方式

3.3 flex-wrap設(shè)置是否換行

• 默認(rèn)情況下月匣，項(xiàng)目都排在一條線（又稱”軸線”）上。flex-wrap屬性定義奋姿，flex布局中默認(rèn)是不換行的桶错。如果子元素設(shè)置的寬度一行放不下，會(huì)自動(dòng)縮姓吐（改變）子元素的寬度
• nowrap 不換行
• wrap 換行

3.4 align-items 設(shè)置側(cè)軸上的子元素排列方式（單行 ）

• 該屬性是控制子項(xiàng)在側(cè)軸（默認(rèn)是y軸）上的排列方式 在子項(xiàng)為單項(xiàng)（單行）的時(shí)候使用
• flex-start 從頭部開始
• flex-end 從尾部開始
• center 居中顯示（用得最多）
• stretch 拉伸（需要子元素【items】不設(shè)置高度院刁，不然不起作用）

3.5 align-content 設(shè)置側(cè)軸上的子元素的排列方式（多行）

設(shè)置子項(xiàng)在側(cè)軸上的排列方式 并且只能用于子項(xiàng)出現(xiàn) 換行 的情況（多行），在單行下是沒有效果的粪狼。

3.6 align-content 和align-items區(qū)別

• align-items 適用于單行情況下退腥， 只有上對(duì)齊、下對(duì)齊再榄、居中和 拉伸
• align-content適應(yīng)于換行（多行）的情況下（單行情況下無(wú)效）狡刘， 可以設(shè)置 上對(duì)齊、下對(duì)齊困鸥、居中嗅蔬、拉伸以及平均分配剩余空間等屬性值。
• 總結(jié)就是單行找align-items 多行找 align-content

3.7 flex-flow 屬性是 flex-direction 和 flex-wrap 屬性的復(fù)合屬性

flex-flow:row wrap;

4. flex布局子項(xiàng)常見屬性

• flex子項(xiàng)目占的份數(shù)
• align-self控制子項(xiàng)自己在側(cè)軸的排列方式
• order屬性定義子項(xiàng)的排列順序（前后順序）

4.1 flex 屬性

flex 屬性定義子項(xiàng)目分配剩余空間疾就，用flex來(lái)表示占多少份數(shù)澜术。

.item {
    flex: <number>; /* 默認(rèn)值 0 */
}

4.2 align-self控制子項(xiàng)自己在側(cè)軸上的排列方式

align-self 屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋 align-items 屬性猬腰。

默認(rèn)值為 auto鸟废，表示繼承父元素的 align-items 屬性，如果沒有父元素姑荷，則等同于 stretch盒延。

span:nth-child(2) {
      /* 設(shè)置自己在側(cè)軸上的排列方式 */
      align-self: flex-end;
}

4.3 order 屬性定義項(xiàng)目的排列順序

數(shù)值越小缩擂，排列越靠前，默認(rèn)為0添寺。

注意：和 z-index 不一樣胯盯。

.item {
    order: <number>;
}

移動(dòng)web開發(fā)之rem布局

1. rem基礎(chǔ)

rem單位

rem (root em)是一個(gè)相對(duì)單位，類似于em计露，em的基準(zhǔn)是父元素字體大小陨闹。

不同的是rem的基準(zhǔn)是相對(duì)于html元素的字體大小。

比如薄坏，根元素（html）設(shè)置font-size=12px; 非根元素設(shè)置width:2rem; 則換成px表示就是24px趋厉。

/* 根html 為 12px */
html {
   font-size: 12px;
}
/* 此時(shí) div 的字體大小就是 24px */       
div {
    font-size: 2rem;
}

rem的優(yōu)勢(shì)：父元素文字大小可能不一致， 但是整個(gè)頁(yè)面只有一個(gè)html胶坠，可以很好來(lái)控制整個(gè)頁(yè)面的元素大小君账。

2. 媒體查詢

什么是媒體查詢

媒體查詢（Media Query）是CSS3新語(yǔ)法。

• 使用 @media查詢沈善，可以針對(duì)不同的媒體類型定義不同的樣式
• @media 可以針對(duì)不同的屏幕尺寸設(shè)置不同的樣式
• 當(dāng)你重置瀏覽器大小的過(guò)程中乡数，頁(yè)面也會(huì)根據(jù)瀏覽器的寬度和高度重新渲染頁(yè)面

媒體查詢語(yǔ)法規(guī)范

• 用 @media開頭 注意@符號(hào)
• mediatype 媒體類型
• 關(guān)鍵字 and not only
• media feature 媒體特性必須有小括號(hào)包含

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

1. mediatype 查詢類型

? 將不同的終端設(shè)備劃分成不同的類型，稱為媒體類型

2. 關(guān)鍵字

? 關(guān)鍵字將媒體類型或多個(gè)媒體特性連接到一起做為媒體查詢的條件闻牡。

• and：將多個(gè)媒體特性連接到一起净赴，相當(dāng)于“且”的意思。
• not：排除某個(gè)媒體類型罩润，相當(dāng)于“非”的意思玖翅，可以省略。
• only：指定某個(gè)特定的媒體類型割以，可以省略金度。

@media only screen and (max-width: 500px)  {
}

3. 媒體特性

   每種媒體類型都具體各自不同的特性，根據(jù)不同媒體類型的媒體特性設(shè)置不同的展示風(fēng)格严沥。常用的三個(gè)猜极。

   注意它們都要包含在小括號(hào)內(nèi)

4. 媒體查詢書寫規(guī)則

   注意： 為了防止混亂，媒體查詢要按照從小到大或者從大到小的順序來(lái)寫,但是最好還是從小到大來(lái)寫消玄，這樣代碼更簡(jiǎn)潔

/*簡(jiǎn)化版寫法跟伏，和注釋掉的效果是一樣的*/
        @media screen and (max-width: 539px) {
            body {
                background-color: blue;
            }
        }
        /* @media screen and (min-width: 540px) and (max-width: 969px) {
            body {
                background-color: green;
            }
        } */       
        @media screen and (min-width: 540px) {
            body {
                background-color: green;
            }
        }
/*利用css層疊性，這段代碼和上面的超出970px的部分樣式?jīng)_突翩瓜，沖突的部分會(huì)以寫在下面的樣式為準(zhǔn)*/
        @media screen and (min-width: 970px) {
            body {
                background-color: red;
            }
        }
        /* 5. screen 和 and 不能省略 */

在不同屏幕尺寸下樣式比較多的時(shí)候受扳，我們可以針對(duì)不同的屏幕尺寸，調(diào)用不同的css文件奥溺。仍然推薦從小到大引入

/*語(yǔ)法規(guī)范*/
<link rel="stylesheet" href="xxx.css" media="mediatype and|not|only (media-feature)">

<link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)">
<link rel="stylesheet" href="style640.css" media="screen and (min-width: 640px)">

3. less 基礎(chǔ)

維護(hù)css弊端

CSS 是一門非程序式語(yǔ)言辞色，沒有變量、函數(shù)浮定、SCOPE（作用域）等概念相满。

• CSS 需要書寫大量看似沒有邏輯的代碼，CSS 冗余度是比較高的桦卒。
• 不方便維護(hù)及擴(kuò)展立美，不利于復(fù)用。
• CSS 沒有很好的計(jì)算能力
• 非前端開發(fā)工程師來(lái)講方灾，往往會(huì)因?yàn)槿鄙?CSS 編寫經(jīng)驗(yàn)而很難寫出組織良好且易于維護(hù)的 CSS 代碼項(xiàng)目建蹄。

Less 介紹

Less（LeanerStyle Sheets 的縮寫）是一門 CSS擴(kuò)展語(yǔ)言，也成為CSS預(yù)處理器裕偿。

做為 CSS的一種形式的擴(kuò)展洞慎，它并沒有減少CSS的功能，而是在現(xiàn)有的CSS語(yǔ)法上嘿棘，為CSS加入程序式語(yǔ)言的特性劲腿。

它在CSS 的語(yǔ)法基礎(chǔ)之上，引入了變量鸟妙，Mixin（混入）焦人，運(yùn)算以及函數(shù)等功能，大大簡(jiǎn)化了 CSS 的編寫重父，并且降低了 CSS的維護(hù)成本花椭，就像它的名稱所說(shuō)的那樣，Less可以讓我們用更少的代碼做更多的事情房午。

Less中文網(wǎng)址：http://lesscss.cn/

常見的CSS預(yù)處理器：Sass矿辽、Less、Stylus

Less是一門 CSS 預(yù)處理語(yǔ)言郭厌，它擴(kuò)展了CSS的動(dòng)態(tài)特性嗦锐。

Less安裝

npm install less -g

檢查是否安裝成功，lessc -v查看版本即可

Less 使用之變量

變量是指沒有固定的值沪曙，可以改變的奕污。因?yàn)槲覀僀SS中的一些顏色和數(shù)值等經(jīng)常使用。

@變量名:值;

• 必須有@為前綴
• 不能包含特殊字符
• 不能以數(shù)字開頭
• 大小寫敏感

（1）定義：

@colorPink: pink;
@font14: 14px;

（2）使用：

p {
    backgroud-color: @colorPink;
    font-size: @font14;
}

vocode Less 編譯插件

easy LESS 插件用來(lái)把less文件編譯為css文件

安裝后重新加載vscode液走。只要保存一下Less文件碳默，會(huì)自動(dòng)生成CSS文件。

Less 嵌套

// 將css改為less缘眶，less的注釋是 //
#header {
    color: white; 
}
#header .logo {
    width: 300px;
}

#header {
    color: white; 
    .logo {
       width: 300px;
    }
}

如果遇見 （交集|偽類|偽元素選擇器） 嘱根，利用&進(jìn)行連接

a:hover {
    color: red;
}
a {
  &:hover {
      color: red;
  }
}

Less 運(yùn)算

任何數(shù)字、顏色或者變量都可以參與運(yùn)算巷懈。就是Less提供了加（+）该抒、減（-）、乘（*）顶燕、除（/）算術(shù)運(yùn)算凑保。

/*Less 里面寫*/
@witdh: 10px + 5;
div {
    border: @witdh solid red;
    width: 82 / 50 rem;
    height: 30px * 2;
}
/*生成的css*/
div {
  border: 15px solid red;
}
/*Less 甚至還可以這樣 */
width: (@width + 5) * 2;
height: 85rem / @font50;//前面定義了@font50: 50px;最終的單位會(huì)取rem
background-color: #666 - #444;// 結(jié)果是#222;

• 乘號(hào)（*）和除號(hào)（/）的寫法
• 運(yùn)算符左右必須有一個(gè)空格隔開 1px + 5
• 對(duì)于兩個(gè)不同的單位的值之間的運(yùn)算冈爹，運(yùn)算結(jié)果的值取第一個(gè)值的單位
• 如果兩個(gè)值之間只有一個(gè)值有單位，則運(yùn)算結(jié)果就取該單位

4. rem適配方案

1. 讓一些不能等比自適應(yīng)的元素欧引，達(dá)到當(dāng)設(shè)備尺寸發(fā)生改變的時(shí)候频伤，等比例適配當(dāng)前設(shè)備。

2. 使用媒體查詢根據(jù)不同設(shè)備按比例設(shè)置html的字體大小芝此，然后頁(yè)面元素使用rem做尺寸單位憋肖，當(dāng)html字體大小變化元素尺寸也會(huì)發(fā)生變化，從而達(dá)到等比縮放的適配婚苹。

技術(shù)方案：

1. less+rem+媒體查詢

2. lflexible.js+rem（推薦岸更，更簡(jiǎn)單）

rem實(shí)際開發(fā)適配方案1

①假設(shè)設(shè)計(jì)稿是750px

②假設(shè)我們把整個(gè)屏幕劃分為15等份（劃分標(biāo)準(zhǔn)不一可以是20份也可以是10等份）

③每一份作為html字體大小级乍，這里就是50px

④那么在320px設(shè)備的時(shí)候件甥，字體大小為320/15就是 21.33px

⑤用我們頁(yè)面元素的大小除以不同的 html字體大小會(huì)發(fā)現(xiàn)他們比例還是相同的

⑥比如我們以750為標(biāo)準(zhǔn)設(shè)計(jì)稿

⑦一個(gè)100 * 100像素（設(shè)計(jì)稿上測(cè)量的）的頁(yè)面元素在 750屏幕下咱揍，就是 100 / 50 轉(zhuǎn)換為rem 是 2rem*2rem 比例是1比1

⑧320屏幕下筷弦，html字體大小為21.33 則 2rem= 42.66px 此時(shí)寬和高都是 42.66 但是寬和高的比例還是 1比1

⑨但是已經(jīng)能實(shí)現(xiàn)不同屏幕下 頁(yè)面元素盒子等比例縮放的效果

總結(jié)：

①最后的公式：頁(yè)面元素的rem值 = 頁(yè)面元素值（px） / （屏幕寬度 / 劃分的份數(shù)）

②屏幕寬度/劃分的份數(shù)就是 html font-size 的大小

③即：頁(yè)面元素的rem值 = 頁(yè)面元素值（px） / html font-size 字體大小

實(shí)際開發(fā)舉例

設(shè)置公共common.less文件

• 新建common.less 設(shè)置好最常見的屏幕尺寸哗魂，利用媒體查詢?cè)O(shè)置不同的html字體大小吧凉，因?yàn)槌耸醉?yè)其他頁(yè)面也需要
• 我們關(guān)心的尺寸有 320px沫屡、360px普监、375px责循、384px糟港、400px、414px院仿、424px秸抚、480px、540px歹垫、720px剥汤、750px
• 劃分的份數(shù)我們定為 15等份
• 因?yàn)槲覀僷c端也可以打開我們蘇寧移動(dòng)端首頁(yè)，我們默認(rèn)html字體大小為 50px排惨，注意這句話寫到最上面

// 超過(guò)我們寫的最大尺寸吭敢，即PC端打開的情況寫死大小。一定要寫到最上面
html {
    font-size: 50px;
}
// 設(shè)置常見的屏幕尺寸 修改里面的html文字大小
// 我們此次定義的劃分的份數(shù) 為 15
@no: 15;
// 320
@media screen and (min-width: 320px) {
    html {
        font-size: 320px / @no;
    }
}
// 360
@media screen and (min-width: 360px) {
    html {
        font-size: 360px / @no;
    }
}
// 375 iphone 678
@media screen and (min-width: 375px) {
    html {
        font-size: 375px / @no;
    }
}

// 384
@media screen and (min-width: 384px) {
    html {
        font-size: 384px / @no;
    }
}

// 400
@media screen and (min-width: 400px) {
    html {
        font-size: 400px / @no;
    }
}
// 414
@media screen and (min-width: 414px) {
    html {
        font-size: 414px / @no;
    }
}
// 424
@media screen and (min-width: 424px) {
    html {
        font-size: 424px / @no;
    }
}

// 480
@media screen and (min-width: 480px) {
    html {
        font-size: 480px / @no;
    }
}

// 540
@media screen and (min-width: 540px) {
    html {
        font-size: 540px / @no;
    }
}
// 720
@media screen and (min-width: 720px) {
    html {
        font-size: 720px / @no;
    }
}

// 750
@media screen and (min-width: 750px) {
    html {
        font-size: 750px / @no;
    }
}

把一個(gè)樣式文件導(dǎo)入另一個(gè)樣式文件：

//在index.less中導(dǎo)入common.less
@import 'common';

5. rem 適配方案2

手機(jī)淘寶團(tuán)隊(duì)出的簡(jiǎn)潔高效 移動(dòng)端適配庫(kù)

我們?cè)僖膊恍枰趯懖煌聊坏拿襟w查詢暮芭，因?yàn)槔锩鎗s做了處理

它的原理是把當(dāng)前設(shè)備劃分為10等份鹿驼，但是不同設(shè)備下，比例還是一致的辕宏。

我們要做的畜晰，就是確定好我們當(dāng)前設(shè)備的html 文字大小就可以了

比如當(dāng)前設(shè)計(jì)稿是 750px， 那么我們只需要把 html 文字大小設(shè)置為 75px(750px / 10) 就可以

里面頁(yè)面元素rem值： 頁(yè)面元素(設(shè)計(jì)稿上測(cè)量的)的px 值 / 75

剩余的瑞筐，讓flexible.js來(lái)去算

github地址：https://github.com/amfe/lib-flexible

總結(jié)：

因?yàn)閒lexible是默認(rèn)將屏幕分為10等分
但是當(dāng)屏幕大于750的時(shí)候希望不要再去重置html字體了凄鼻，所以要自己通過(guò)媒體查詢?cè)O(shè)置一下
并且要把權(quán)重提到最高

@media screen and (min-width:750px) {
     html {
         font-size: 75px !important;
    }
}

VSCode px 轉(zhuǎn)換rem 插件 cssrem

因?yàn)閏ssrem中css自動(dòng)轉(zhuǎn)化為rem是參照默認(rèn)插件的16轉(zhuǎn)換的所以需要自己配置

setting里搜索setting.json，加上"cssrem.rootFontSize": 75(設(shè)計(jì)稿除以10等份)

移動(dòng)端WEB開發(fā)之響應(yīng)式布局

1. 響應(yīng)式開發(fā)原理

就是使用媒體查詢針對(duì)不同寬度的設(shè)備進(jìn)行布局和樣式的設(shè)置，從而適配不同設(shè)備的目的块蚌。

設(shè)備的劃分情況：

• 小于768的為超小屏幕（手機(jī)）
• 768~992之間的為小屏設(shè)備（平板）
• 992~1200的中等屏幕（桌面顯示器）
• 大于1200的寬屏設(shè)備（大桌面顯示器）

2. 響應(yīng)式布局容器

響應(yīng)式需要一個(gè)父級(jí)做為布局容器闰非，來(lái)配合子級(jí)元素來(lái)實(shí)現(xiàn)變化效果。

原理就是在不同屏幕下匈子，通過(guò)媒體查詢來(lái)改變這個(gè)布局容器的大小河胎，再改變里面子元素的排列方式和大小闯袒，從而實(shí)現(xiàn)不同屏幕下虎敦，看到不同的頁(yè)面布局和樣式變化。

父容器版心的常用尺寸劃分

• 超小屏幕（手機(jī)政敢，小于 768px）：設(shè)置寬度為 100%
• 小屏幕（平板其徙，大于等于 768px）：設(shè)置寬度為 750px
• 中等屏幕（桌面顯示器，大于等于 992px）：寬度設(shè)置為 970px
• 大屏幕（大桌面顯示器喷户，大于等于 1200px）：寬度設(shè)置為 1170px

但是我們也可以根據(jù)實(shí)際情況自己定義劃分

BootStrap的介紹

1. Bootstrap簡(jiǎn)介

Bootstrap 來(lái)自 Twitter（推特）唾那，是目前最受歡迎的前端框架。Bootstrap 是基于HTML褪尝、CSS 和 JAVASCRIPT 的闹获，它簡(jiǎn)潔靈活，使得 Web 開發(fā)更加快捷河哑。

中文網(wǎng) 官網(wǎng) 推薦網(wǎng)站

框架：顧名思義就是一套架構(gòu)避诽，它有一套比較完整的網(wǎng)頁(yè)功能解決方案，而且控制權(quán)在框架本身璃谨，有預(yù)制樣式庫(kù)沙庐、組件和插件。使用者要按照框架所規(guī)定的某種規(guī)范進(jìn)行開發(fā)佳吞。

2. bootstrap優(yōu)點(diǎn)

• 標(biāo)準(zhǔn)化的html+css編碼規(guī)范
• 提供了一套簡(jiǎn)潔拱雏、直觀、強(qiáng)悍的組件
• 有自己的生態(tài)圈底扳，不斷的更新迭代
• 讓開發(fā)更簡(jiǎn)單铸抑，提高了開發(fā)的效率

3. 版本簡(jiǎn)介

2.x.x：停止維護(hù),兼容性好,代碼不夠簡(jiǎn)潔，功能不夠完善衷模。

3.x.x：目前使用最多,穩(wěn)定,但是放棄了IE6-IE7鹊汛。對(duì) IE8 支持但是界面效果不好,偏向用于開發(fā)響應(yīng)式布局、移動(dòng)設(shè)備優(yōu)先的WEB 項(xiàng)目算芯。

4.x.x：最新版柒昏，目前還不是很流行

4. bootstrap基本使用

在現(xiàn)階段我們還沒有接觸JS相關(guān)課程，所以我們只考慮使用它的樣式庫(kù)熙揍。

Bootstrap 使用四步曲：

1. 創(chuàng)建文件夾結(jié)構(gòu)

?

2. 創(chuàng)建 html 骨架結(jié)構(gòu)

   <!DOCTYPE html>
   <html lang="zh-CN">
     <head>
       <meta charset="utf-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <!-- 上述3個(gè)meta標(biāo)簽*必須*放在最前面职祷，任何其他內(nèi)容都*必須*跟隨其后！ -->
       <title>Bootstrap 101 Template</title>
   
       <!-- Bootstrap -->
       <link href="css/bootstrap.min.css" rel="stylesheet">
   
       <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
       <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
       <!--[if lt IE 9]>
         <!--解決ie9以下對(duì)html5新增標(biāo)簽的不識(shí)別，并導(dǎo)致css不識(shí)別的問題>
         <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
         <!--解決ie9以下對(duì)css3 media Query的不識(shí)別>
         <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
       <![endif]-->
     </head>
     <body>
       <h1>你好有梆，世界是尖！</h1>
   
       <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
       <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
       <!-- Include all compiled plugins (below), or include individual files as needed -->
       <script src="js/bootstrap.min.js"></script>
     </body>
   </html>
   ```?
   
   

3. 引入相關(guān)樣式文件

   <!-- Bootstrap 核心樣式-->
   <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
   

5. bootstrap布局容器

Bootstrap 需要為頁(yè)面內(nèi)容和柵格系統(tǒng)包裹一個(gè) .container 或者.container-fluid 容器，它提供了兩個(gè)作此用處的類泥耀。

.container

• 響應(yīng)式布局的容器 固定寬度
• 大屏 ( >=1200px) 寬度定為 1170px
• 中屏 ( >=992px) 寬度定為 970px
• 小屏 ( >=768px) 寬度定為 750px
• 超小屏 (100%)

.container-fluid

• 流式布局容器 百分百寬度
• 占據(jù)全部視口（viewport）的容器饺汹。

6. Bootstrap柵格系統(tǒng)

Bootstrap提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)痰催，隨著屏幕或視口（viewport）尺寸的增加兜辞，系統(tǒng)會(huì)自動(dòng)分為最多12列。

柵格系統(tǒng)用于通過(guò)一系列的行（row）與列（column）的組合來(lái)創(chuàng)建頁(yè)面布局夸溶，你的內(nèi)容就可以放入這些創(chuàng)建好的布局中逸吵。

• 按照不同屏幕劃分為1~12 等份
• 行（row） 可以去除父容器左右15px的內(nèi)邊距
• 類前綴：col-xs-：超小屏（手機(jī)）； col-sm-：小屏（平板）缝裁； col-md：中等屏（普通PC顯示器）扫皱； col-lg-：大屏（寬屏顯示器）；
• 每一列默認(rèn)有左右15px的 padding
• 可以同時(shí)為一列指定多個(gè)設(shè)備的類名捷绑，以便劃分不同份數(shù) 例如 class="col-md-4 col-sm-6"

柵格嵌套就是一個(gè)列內(nèi)再分成若干份小列韩脑。我們可以通過(guò)添加一個(gè)新的 .row 元素和一系列 .col-sm-* 元素到已經(jīng)存在的 .col-sm-*元素內(nèi)。因?yàn)閞ow的樣式取消了父級(jí)的padding值粹污，且高度自動(dòng)和父級(jí)一樣高段多。

<!-- 列嵌套 -->
 <div class="col-sm-4">
    <div class="row">
         <div class="col-sm-6">小列</div>
         <div class="col-sm-6">小列</div>
    </div>
</div>

列偏移

使用 .col-md-offset-* 類可以將列向右側(cè)偏移。這些類實(shí)際是通過(guò)使用 * 選擇器為當(dāng)前元素增加了左側(cè)的邊距（margin）厕怜。

 <!-- 列偏移 -->
  <div class="row">
      <div class="col-lg-4">靠左盒子</div>
      <div class="col-lg-4 col-lg-offset-4">靠右盒子</div>
  </div>
  <div class="row">
      <div class="col-lg-8 col-lg-offset-2">中間盒子</div>
  </div>

列排序

通過(guò)使用 .col-md-push-* 和 .col-md-pull-* 類就可以很容易的改變列（column）的順序衩匣。pull是拉到左邊（右側(cè)的份數(shù)），push是推到右側(cè)（左側(cè)的份數(shù)）

 <!-- 列排序 -->
  <div class="row">
      <div class="col-lg-4 col-lg-push-8">左側(cè)（被推到右側(cè)）</div>
      <div class="col-lg-8 col-lg-pull-4">右側(cè)（被拉到左側(cè)）</div>
  </div>

響應(yīng)式工具

為了加快對(duì)移動(dòng)設(shè)備友好的頁(yè)面開發(fā)工作粥航，利用媒體查詢功能琅捏，并使用這些工具類可以方便的針對(duì)不同設(shè)備展示或隱藏頁(yè)面內(nèi)容。

阿里百秀案例制作

設(shè)計(jì)圖： 本設(shè)計(jì)圖采用 1280px 設(shè)計(jì)尺寸

container寬度修改

因?yàn)楸拘Ч麍D采取 1280的寬度递雀， 而Bootstrap 里面 container寬度 最大為 1170px柄延，因此我們需要手動(dòng)改下container寬度

 /* 利用媒體查詢修改 container寬度適合效果圖寬度  */
  @media (min-width: 1280px) { 
    .container { 
    width: 1280px; 
     } 
   }