屏幕適配
rem適配
- 1、設(shè)置<meta name="viewport" content="width=device-width, initial-scale=1">
- 設(shè)置頁(yè)面元素寬度單位為 rem 或 em
注：此方案比較靈活祟同，我們的案例將采用這種方案
- 設(shè)置頁(yè)面元素寬度單位為 rem 或 em
關(guān)于em和rem
em 相對(duì)長(zhǎng)度單位，其參照當(dāng)前元素字號(hào)大小，如果當(dāng)前元素未設(shè)置字號(hào)則會(huì)繼承其祖先元素字號(hào)大小 例如 .box {font-size: 16px;} 則 1em = 16px .box {font-size: 32px;} 則 1em = 32px，0.5em = 16px
rem 相對(duì)長(zhǎng)度單位嚎研，其參照根元素(html)字號(hào)大小 例如 html {font-size: 16px;} 則 1rem = 16px html {font-size: 32px;} 則 1rem = 32px，0.5rem = 16px;
注：所有瀏覽器默認(rèn)字號(hào)都是16px（某些安卓手機(jī)可以調(diào)置系統(tǒng)字號(hào)后库倘，瀏覽器默認(rèn)字號(hào)會(huì)受影響）
調(diào)試工具
模擬調(diào)試
現(xiàn)代主流瀏覽器均支持移動(dòng)開(kāi)發(fā)模擬調(diào)試临扮，通常按F12可以調(diào)起，其使用也比較簡(jiǎn)單教翩，可以幫我們方便快捷定位問(wèn)題。
遠(yuǎn)程調(diào)試
模擬調(diào)試可以滿足大部分的開(kāi)發(fā)調(diào)試任務(wù)饱亿，但是由于移動(dòng)設(shè)備種類(lèi)繁多蚜退，環(huán)境也十分復(fù)雜，模擬調(diào)試容易出現(xiàn)差錯(cuò)彪笼，所以真機(jī)調(diào)試變的非常必要钻注。
有兩種方法可以實(shí)現(xiàn)真機(jī)調(diào)試：
- 1、將做好的網(wǎng)頁(yè)上傳至服務(wù)器或者本地搭建服務(wù)器配猫，然后移動(dòng)設(shè)備通過(guò)網(wǎng)絡(luò)來(lái)訪問(wèn)幅恋。
- 2、借助第三方的調(diào)試工具泵肄，如weinre捆交、debuggap、ghostlab等
真機(jī)調(diào)試必須保證移動(dòng)設(shè)備同服務(wù)器間的網(wǎng)絡(luò)是相通的腐巢。
媒體查詢
設(shè)備終端的多樣化品追，直接導(dǎo)致了網(wǎng)頁(yè)的運(yùn)行環(huán)境變的越來(lái)越復(fù)雜，為了能夠保證我們的網(wǎng)頁(yè)可以適應(yīng)多個(gè)終端冯丙，不得不專(zhuān)門(mén)為某些特定的設(shè)備設(shè)計(jì)不同的展示風(fēng)格肉瓦，要實(shí)現(xiàn)這個(gè)目標(biāo)的前提是必須有能力了解當(dāng)前網(wǎng)頁(yè)是運(yùn)行什么終端設(shè)備，通過(guò)媒體查詢可以做到這一點(diǎn)胃惜。
媒體類(lèi)型
可以通過(guò)媒體類(lèi)型對(duì)不同的設(shè)備指定不同的樣式风宁，一般我們使用screen。
| 值 | 描述 |
|---|---|
| all | 用于所有設(shè)備 |
| 用于打印機(jī)和打印預(yù)覽 | |
| screen | 用于電腦屏幕,平板電腦,智能手機(jī)等 |
媒體特性
| 值 | 描述 |
|---|---|
| width | 定義輸出設(shè)備中的頁(yè)面可見(jiàn)區(qū)域?qū)挾?/td> |
| height | 定義輸出設(shè)備中的頁(yè)面可見(jiàn)區(qū)域高度 |
| min-width | 定義輸出設(shè)備中的頁(yè)面最小可見(jiàn)區(qū)域?qū)挾?/td> |
| min-height | 定義輸出設(shè)備中的頁(yè)面最小可見(jiàn)區(qū)域高度 |
| max-width | 定義輸出設(shè)備中的頁(yè)面最大可見(jiàn)區(qū)域?qū)挾?/td> |
| max-height | 定義輸出設(shè)備中的頁(yè)面最大可見(jiàn)區(qū)域高度 |
| device-width | 定義輸出設(shè)備的屏幕可見(jiàn)寬度 |
| device-height | 定義輸出設(shè)備的屏幕可見(jiàn)高度 |
| aspect-ratio | 定義輸出設(shè)備中的頁(yè)面可見(jiàn)區(qū)域?qū)挾扰c高度的比率 |
| device-aspect-ratio | 定義輸出設(shè)備的屏幕可見(jiàn)寬度與高度的比率 |
判斷條件或者查詢依據(jù)
| 值 | 描述 |
|---|---|
| width | 定義輸出設(shè)備中的頁(yè)面可見(jiàn)區(qū)域?qū)挾?/td> |
| height | 定義輸出設(shè)備中的頁(yè)面可見(jiàn)區(qū)域高度 |
| min-width | 定義輸出設(shè)備中的頁(yè)面最小可見(jiàn)區(qū)域?qū)挾?/td> |
| min-height | 定義輸出設(shè)備中的頁(yè)面最小可見(jiàn)區(qū)域高度 |
| max-width | 定義輸出設(shè)備中的頁(yè)面最大可見(jiàn)區(qū)域?qū)挾?/td> |
| max-height | 定義輸出設(shè)備中的頁(yè)面最大可見(jiàn)區(qū)域高度 |
| device-width | 定義輸出設(shè)備的屏幕可見(jiàn)寬度 |
| device-height | 定義輸出設(shè)備的屏幕可見(jiàn)高度 |
| aspect-ratio | 定義輸出設(shè)備中的頁(yè)面可見(jiàn)區(qū)域?qū)挾扰c高度的比率 |
| device-aspect-ratio | 定義輸出設(shè)備的屏幕可見(jiàn)寬度與高度的比率 |
關(guān)鍵字
- 1蛹疯、and 可以將多個(gè)媒體特性連接到一起戒财，相當(dāng)于“且”的意思。
- 2捺弦、not 排除某個(gè)媒體類(lèi)型饮寞，相當(dāng)于“非”的意思孝扛，可以省略。
- 3幽崩、only指定某個(gè)特定的媒體類(lèi)型苦始，可以省略。
引入方式
- 1慌申、link方法
<link href="./3-1.css" media="only screen and (max-width: 320px)"> - 2陌选、@media方法（寫(xiě)在CSS里）
常用特性
- 1、width / height 完全等于layout viewport蹄溉，
- 2咨油、max-width / max-height 小于等于layout viewport
- 3、min-width / min-height 大于等于layout viewport
- 4柒爵、device-width / device-height 完全等于ideal viewport
- 5役电、orientation: portrait | landscape 肖像/全景模式
css預(yù)處理器
CSS 預(yù)處理器是一種語(yǔ)言，用來(lái)為 CSS 增加一些編程的的特性棉胀，無(wú)需考慮瀏覽器的兼容性問(wèn)題法瑟，并且你可以在 CSS 中使用變量、簡(jiǎn)單的程序邏輯唁奢、函數(shù)等等在編程語(yǔ)言中的一些基本技巧霎挟，可以讓你的 CSS 更簡(jiǎn)潔，適應(yīng)性更強(qiáng)麻掸，代碼更直觀等諸多好處
酥夭。
常見(jiàn)的CSS預(yù)處理器有：LESS、SASS论笔、Stylus等
less
安裝
- 1、安裝Nodejs環(huán)境 Node Package Manager (驗(yàn)證 node -v npm -v)
- 2千所、打開(kāi)控制臺(tái)（cmd）狂魔，執(zhí)行
npm install -g less(驗(yàn)證 lessc -v) - 3、執(zhí)行
npm install -g less-plugin-clean-css - 4淫痰、命令行編譯
lessc path/xxx.less path/xxx.css
編譯
一般都會(huì)借助于編輯器插件來(lái)完成編譯任務(wù)最楷，以sublime_text為例
- 1、
ctrl+shit+p打開(kāi)命令面板 - 2待错、輸入
install package然后回車(chē) - 3籽孙、安裝 LESS、lessc火俄、Less2Css三個(gè)插件
- 4犯建、
alt+s快捷鍵即可實(shí)現(xiàn)編譯
語(yǔ)法
變量
格式：@變量名: 值，定義完成后可以重復(fù)使用
混合
我們可以像使用函數(shù)一樣來(lái)使用CSS
嵌套
嵌套可以非常方便的管理我們的CSS層級(jí)關(guān)系
瀏覽器中的使用
我們可以引入一個(gè)less.js文件瓜客，實(shí)現(xiàn)實(shí)時(shí)的解析适瓦，而不必每次修改都要編譯竿开，最后完成所有開(kāi)發(fā)任務(wù)后，再通過(guò)編輯器編譯成css文件玻熙。
- 1否彩、下載然后引入less.js
- 2、引入xx.less文件嗦随，如：
<link rel="stylesheet/less" type="text/css" href="styles.less" />
*注意：rel屬性必須指定成stylesheet/less列荔，并且styles.less要先于less.js引入 *
必須以服務(wù)器方式訪問(wèn)，可以放到study目錄下枚尼，或者webstrom自帶服務(wù)器功能
