網(wǎng)頁布局方法總結(jié)：

• 目前已經(jīng)學(xué)習(xí)了兩種布局方式：
  • 固定寬度布局：常見于PC端事扭，設(shè)定固定的寬度作為版心來布局
  • 流式布局：常見于移動(dòng)端捎稚，所有寬度不固定，采用相對參照的方式求橄，用百分比來設(shè)置
• 接下來還要接觸兩種布局方式：
  • 柵格式布局：這種布局方式被bootstrap框架使用今野，主要思路是讓整個(gè)頁面分為多個(gè)均寬等份。某個(gè)元素設(shè)置寬度時(shí)罐农，讓它占有幾個(gè)等份条霜，而不是直接設(shè)置寬度
  • 響應(yīng)式布局：很流行的布局方式，自動(dòng)檢測設(shè)備寬度來布局涵亏，就是說不同分辨率設(shè)備訪問同一網(wǎng)頁宰睡，看到的布局方式可能會(huì)有不同，達(dá)到一個(gè)頁面可以適配多種設(shè)備
• 注意：每次布局方式都有其可取之處气筋，所以這幾種布局方式不應(yīng)該單獨(dú)存在拆内，往往是根據(jù)實(shí)際情況結(jié)合使用

響應(yīng)式布局介紹

• 核心概念：使用媒體查詢來獲取設(shè)備的寬度，然后根據(jù)寬度來設(shè)置不同的css樣式宠默，實(shí)現(xiàn)響應(yīng)式布局
• 優(yōu)點(diǎn)：響應(yīng)式布局可以使網(wǎng)頁在不同的設(shè)備上都能完美的展現(xiàn)矛纹，提高用戶的瀏覽體驗(yàn)
• 缺點(diǎn)：正因?yàn)樾枰獙Σ煌O(shè)備設(shè)置不同的css樣式，所以不得不利用媒體查詢書寫大量的代碼來進(jìn)行適配光稼。代碼冗余過多頁面體積太大或南，就會(huì)造成嚴(yán)重的性能消耗
• 應(yīng)用場景：根據(jù)上述優(yōu)缺點(diǎn)可以知道，響應(yīng)式開發(fā)一般主要用在企業(yè)官網(wǎng)艾君、博客采够、資訊網(wǎng)站等，以瀏覽展示內(nèi)容為主沒有太多復(fù)雜交互的網(wǎng)站冰垄。這樣才能在提高用戶體驗(yàn)的情況下蹬癌，盡量減少性能消耗
• 設(shè)備寬度劃分建議：
  • 大屏設(shè)備 w>=1200px
  • 中等屏幕 992px<=w<1200px
  • 小屏設(shè)備 768px<=w<992px
  • 超小屏幕 w<768px

響應(yīng)式開發(fā)

• 移動(dòng)web開發(fā)和響應(yīng)式開發(fā)是前端人員的必備技能
• 在以前為了適配移動(dòng)端，通常是專門為移動(dòng)端做一套新的頁面虹茶。但是現(xiàn)在移動(dòng)設(shè)備越來越多逝薪，如果每種設(shè)備都做一套頁面開發(fā)成本太大。所以正常情況下蝴罪，現(xiàn)在新做一個(gè)網(wǎng)站董济，優(yōu)先都會(huì)考慮到響應(yīng)式開發(fā)

媒體查詢

• 媒體查詢的作用是設(shè)置不同屏幕寬度下的樣式
• 基礎(chǔ)語法：
  • @media mediatype and|not|only (media feature) {
CSS-Code;
}
  • mediatype規(guī)定用于哪種設(shè)備，例如：要應(yīng)用于電腦屏幕要门，平板電腦虏肾，智能手機(jī)等，就寫screen
  • and|not|only是作為連接條件判斷的關(guān)鍵字欢搜，最常用的是and封豪。not是取反值(不在范圍內(nèi)才應(yīng)用，幾乎用不到)
  • media feature條件判斷炒瘟，例如：寫min-width: 1200px吹埠，是限制頁面寬度最小不能低于1200px，也就是說必須大于或等于1200px才能應(yīng)用內(nèi)部的css樣式
  • 還有很多屬性值疮装，查閱手冊
• 條件判斷的知識點(diǎn)：
  • 當(dāng)你用媒體查詢來設(shè)置css樣式時(shí)缘琅，必然會(huì)有條件判斷，根據(jù)滿足不同條件應(yīng)用不同樣式
  • 書寫建議：
    • 如果判斷的是最小值min-width斩个，那么判斷值需要按照從小到大的順序?qū)?推薦胯杭，因?yàn)?code>bootstrap就是用的這個(gè)方式)
    • 如果判斷的是最大值max-width，那么判斷值需要按照從大到小的順序?qū)?/li>
  • 不同類型屏幕肯定是有個(gè)值的范圍區(qū)間(例如768<寬度<992)受啥。但是實(shí)際書寫中做个，只要滿足上面兩種情況的寬度值判斷。那么一個(gè)就行了(對應(yīng)判斷的最大最小)滚局，不用寫完整的區(qū)間
• 媒體查詢特性：
  • 向上兼容：寬度值更小的設(shè)置居暖，默認(rèn)會(huì)傳遞到寬度值更大的設(shè)置中去
  • 向下覆蓋：寬度值更大的設(shè)置會(huì)覆蓋寬度值小的設(shè)置
  • 解釋：就是說如果你只寫了寬度值小的設(shè)置，那么它的向上兼容會(huì)默認(rèn)往上傳遞藤肢，在寬度值更大沒寫的情況下太闺，會(huì)應(yīng)用小的設(shè)置。但是一旦寫了寬度值大的設(shè)置嘁圈，那么它向下覆蓋會(huì)覆蓋掉傳遞過來的設(shè)置省骂，這樣寬度值小的設(shè)置就只會(huì)在其范圍內(nèi)應(yīng)用蟀淮，寬度值大的設(shè)置也是。這也是為什么不用寫完整范圍區(qū)間的原因钞澳。
  • 注意：如果寫了完整范圍區(qū)間怠惶，這兩個(gè)特性不會(huì)生效
• 媒體功能知識點(diǎn)
  • 媒體功能就是條件判斷的關(guān)鍵字(比如：min-width、min-device-width)轧粟，這里說明一下有device和沒有device的區(qū)別
  • 有device的時(shí)候策治，它獲取的寬度值是設(shè)備的寬度值，重點(diǎn)：因?yàn)閜c端設(shè)備寬度不會(huì)隨著瀏覽器伸縮而改變兰吟，所以你就算寫多個(gè)條件判斷通惫，也只有滿足當(dāng)前設(shè)備寬度值的css樣式才會(huì)生效。一般來說混蔼，如果只針對移動(dòng)端做媒體查詢履腋，那么才建議用有device的媒體功能
  • 沒有device的時(shí)候，它獲取的是可視區(qū)域的寬度(也可以理解為頁面寬度)拄丰，這個(gè)不管移動(dòng)端還是pc端府树，只要伸縮瀏覽器頁面寬度值就會(huì)變化，所以不存在上面說的問題料按。如果要兼顧pc端和移動(dòng)端奄侠，那么建議用沒有device的媒體功能
• 補(bǔ)充說明
  • 媒體查詢不光可以在內(nèi)部寫直接css樣式，也可以通過它來引入不同的css樣式表
  • 寫法：<link rel="stylesheet" media="mediatype and|not|only (media feature) " href="xxx.css" />
  • 如果滿足條件判斷载矿，就會(huì)引入對應(yīng)的樣式表文件

響應(yīng)式開發(fā)框架

• 因?yàn)閣eb開發(fā)越來越復(fù)雜垄潮，所以有人將比較常用的功能模塊組件化(輪播圖、導(dǎo)航欄闷盔、選項(xiàng)卡等)弯洗，然后將一系列的組件封裝，就形成了css框架》旯矗現(xiàn)在框架有非常多牡整，比如：bootstrap、amazeUi溺拱、Framework7等等逃贝。最受歡迎當(dāng)屬bootstrap

Bootstrap

• 關(guān)于bootstrap的使用方法，中文網(wǎng)已經(jīng)有詳細(xì)說明迫摔，不作贅述
• 這里著重說明下沐扳，bootstrap的布局核心概念：柵格式布局
  • 柵格式布局是流式布局，即：從左往右句占，從上到下
  • 柵格系統(tǒng)用于通過一系列的行（row）與列（column）的組合來創(chuàng)建頁面布局沪摄，首先行必須包含在 .container （根據(jù)不同設(shè)備寬度先設(shè)置好的固定寬度）或.container-fluid （100% 寬度）容器中
  • 然后在容器添加“行（row）”
  • 再通過“行（row）”在水平方向創(chuàng)建一組“列（column）”，默認(rèn)情況下行被分為12等份柵格，不設(shè)置的話一個(gè)列占據(jù)一份柵格
  • 通過.col-(xs||sm||md||lg)-x(數(shù)字)這種預(yù)定義的類杨拐，就可以設(shè)置每個(gè)列到底占據(jù)多少個(gè)柵格(即寬度)
  • xs表示超小屏幕下占據(jù)幾個(gè)柵格祈餐，sm表示小屏幕下占據(jù)幾個(gè)柵格，同理戏阅。md表示中屏幕昼弟，lg表示大屏幕。這其實(shí)就跟響應(yīng)式一樣奕筐，根據(jù)不同寬度設(shè)置不同樣式。不過框架封裝好了变骡，不用再去寫媒體查詢离赫。可以不用全屏幕類都寫塌碌，但要注意向上兼容和向下覆蓋的特性
  • 還有一些柵格相關(guān)的樣式：列偏移offset渊胸，列排序push||pull，列嵌套台妆，隱藏類hidden等翎猛，可以看中文網(wǎng)了解，上面都有詳細(xì)說明介紹
• 另外如果想定制bootstrap的一些設(shè)置接剩，比如：每行分為多少等份這類的切厘，中文網(wǎng)上也有詳細(xì)說明
• 總而言之就是多看文檔

Less

• less是一種動(dòng)態(tài)的樣式表語言，通過簡潔的語法讓css編寫更加簡單懊缺。注意：less既然是一種語言疫稿，那么就其專門的語法。并且瀏覽器不能解析less文件鹃两，所以less實(shí)質(zhì)上是一套語法和編譯器組成的
• 必備環(huán)境搭建：
  • 首先必須安裝了node以及npm
  • 然后通過命令行輸入npm install -g less就能在全局環(huán)境下安裝less遗座，通過lessc -v指令能檢測是否安裝成功
  • 手動(dòng)編譯less文件，需要先用命令行進(jìn)入less文件所在目錄俊扳，然后輸入lessc xxx.less xxx.css途蒋，前一個(gè)是需要編譯的文件，后一個(gè)是需要變成生產(chǎn)的css文件
  • 一般來說代碼編輯器都有自動(dòng)編譯功能馋记，比如vscode号坡，只要搭建好了環(huán)境，再安裝一個(gè)easyless插件抗果，就能自動(dòng)編譯less文件
• 語法簡單介紹
  • 變量：@變量名:值通過@符號來聲明變量筋帖，并賦值。在寫css樣式時(shí)冤馏，該變量就可以作為樣式的屬性值來使用
  • 混入(也叫混合日麸，相當(dāng)于函數(shù))：
    • .example { xxx: xxx}這是一個(gè)正常的樣式，在less可以樣式復(fù)用。如果想要使用與這個(gè)類名相同的樣式代箭，直接在大括號內(nèi)寫類名即可墩划。例如：.example2 { xxx: xxx; .example}，這里混入類名的樣式嗡综，就會(huì)自動(dòng)被編譯到新的類名中
    • 并且還可以跟函數(shù)一樣設(shè)置默認(rèn)參數(shù)：.example(@a:10px) { xxx: @a}乙帮，這時(shí)混入類名，可以這樣寫.example2 { xxx: xxx; .example(xx)}极景。這個(gè)參數(shù)可以根據(jù)自己需要來傳入察净，如果不寫參數(shù)那么就會(huì)使用默認(rèn)值10px
  • 嵌套。用法時(shí)不用再多次寫類名結(jié)構(gòu)盼樟，而是父元素大括號內(nèi)部氢卡，直接寫子元素的類名。如果什么都不寫編譯后是后代選擇器晨缴，加上>符號編譯后就是子選擇器译秦。另外注意：如果要再當(dāng)前元素內(nèi)部寫它的偽類和偽元素，必須加上&符號击碗。
• 下面是個(gè)簡單的例子：
  • div {
color: @baseColor; //用變量來設(shè)置值
.header(); //混入復(fù)用之前寫好的.header的樣式筑悴，不寫參數(shù)使用默認(rèn)值
>p { //給直接子元素p設(shè)置樣式
font-size: 16px;
}
a { //給所有后代a標(biāo)簽設(shè)置樣式
text-decoration: none;
}
&::before { //為其偽元素設(shè)置樣式
content: "";
}
}
• 另外如果想注釋也一起編譯，需要使用/**/這種注釋符才行稍途。less也支持@import在樣式文件中阁吝，引入其他樣式文件
• 如果想不編譯直接引入less文件也有辦法，如下：
  • 1.與引入css文件大致相同<link type="stylesheet/less" href="./xx/xx/xx.less" />
  • 2.引入專門解析less的js文件<script src="./xx/xx/less.js" ></script>
• 更多語法看中文手冊

rem的介紹

• rem是css3中新增的一種大小單位晰房，類似于以前的em求摇，都是以元素的字號作為參照方式
• em和rem的區(qū)別
  • em優(yōu)先參照當(dāng)前元素的字號，如果當(dāng)前元素沒有設(shè)置殊者，就參照父容器或者瀏覽器默認(rèn)字號(每個(gè)瀏覽器都是有默認(rèn)字體大小的)
  • rem是參照根元素的字號(html)与境，如果根元素沒有設(shè)置就參照瀏覽器默認(rèn)字號
• rem的優(yōu)點(diǎn)
  • 相對em而言，如果當(dāng)前元素需要設(shè)置字體大小猖吴，那么em的大小實(shí)際上就是被定死了摔刁。而rem要靈活很多，因?yàn)榻o當(dāng)前元素設(shè)置字號并不會(huì)影響rem海蔽。在網(wǎng)站開發(fā)中也推薦使用rem
• 常見使用場景：
  • 開發(fā)中ui給我們的稿件尺寸都是行業(yè)通用的尺寸共屈，但是手機(jī)屏幕的寬度各式各樣，為了使展示效果更好党窜，一般是同比例的縮小或者放大具體元素拗引，使整個(gè)頁面的總體比例不變
  • 思維模式跟柵格式系統(tǒng)很像。不管是什么尺寸的圖片幌衣，首先把它分為x份(自定義)等份矾削。那么每個(gè)元素再該圖中占據(jù)的份數(shù)是可以知道的壤玫。然后不管什么手機(jī)設(shè)備，也把它分為x份等份(必須與稿件相同)哼凯。算出每份的值欲间，再把值設(shè)置為根元素字號，那么就可以通過rem來設(shè)置大小了断部。
  • 雖然不同屏幕分出來的值可能不同猎贴，但是通過rem設(shè)置它的比例是相同的，就達(dá)到了想要的目的