一、視口
1.1伺绽、視口的概念
視口 是移動(dòng)設(shè)備上用來顯示網(wǎng)頁的區(qū)域养泡，一般會(huì)比移動(dòng)設(shè)備可視區(qū)域大嗜湃，寬度可能是980px或者1024px，目的是為了顯示下整個(gè)為PC端設(shè)計(jì)的網(wǎng)頁澜掩，這樣帶來的后果是移動(dòng)端會(huì)出現(xiàn)橫向滾動(dòng)條购披，為了避免這種情況，移動(dòng)端會(huì)將視口縮放到移動(dòng)端窗口的大小肩榕。這樣會(huì)讓網(wǎng)頁不容易觀看刚陡，可以用 meta 標(biāo)簽，name=“viewport ” 來設(shè)置視口的大小点把，將視口的大小設(shè)置為和移動(dòng)設(shè)備可視區(qū)一樣的大小橘荠。-
1.2、視口設(shè)置方法如下( 快捷方式：
meta:vp + tab)：
視口設(shè)置方法<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- 視口的設(shè)置：meta:vp + Tab 鍵 產(chǎn)生下面的代碼 郎逃，如果網(wǎng)頁想在移動(dòng)端顯示要加上這句話哥童，網(wǎng)頁端會(huì)自動(dòng)略過這句話，只針對(duì)移動(dòng)端 viewport：視口的意思 width=device-width：讓視口的寬度等于設(shè)備的寬度 user-scalable=no：不允許用戶自動(dòng)縮放 initial-scale=1.0：初始放縮等于 1.0 maximum-scale=1.0：最大放縮也等于 1.0 minimum-scale=1.0 最小放縮也等于 1.0 三個(gè)縮放都要寫的原因是兼容不同的瀏覽器 --> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>視口-屏幕適配</title> <style type="text/css"> .box{ width: 300px; height: 300px; background-color: gold; } </style> </head> <body> <div class="box"></div> </body> </html>提示：視口的設(shè)置：
meta:vp + Tab 鍵產(chǎn)生下面的代碼 褒翰，如果網(wǎng)頁想在移動(dòng)端顯示要加上這句話贮懈，網(wǎng)頁端會(huì)自動(dòng)略過這句話，只針對(duì)移動(dòng)端 -
1.3优训、pc端與移動(dòng)端渲染網(wǎng)頁過程：
pc端與移動(dòng)端渲染網(wǎng)頁過程
二朵你、視網(wǎng)膜屏幕（retina屏幕）清晰度解決方案
- 2.1、視網(wǎng)膜屏幕指的是屏幕的物理像素密度更高的屏幕揣非，物理像素可以理解為屏幕上的一個(gè)發(fā)光點(diǎn)抡医，無數(shù)發(fā)光的點(diǎn)組成的屏幕，視網(wǎng)膜屏幕比一般屏幕的物理像素點(diǎn)更小早敬，常見有2倍的視網(wǎng)膜屏幕和3倍的視網(wǎng)膜屏幕忌傻，2倍的視網(wǎng)膜屏幕，它的物理像素點(diǎn)大小是一般屏幕的1/4,3倍的視網(wǎng)膜屏幕搞监，它的物理像素點(diǎn)大小是一般屏幕的1/9水孩。圖像在視網(wǎng)膜屏幕上顯示的大小和在一般屏幕上顯示的大小一樣，但是由于視網(wǎng)膜屏幕的物理像素點(diǎn)比一般的屏幕小琐驴，圖像在上面好像是被放大了俘种，圖像會(huì)變得模糊，為了解決這個(gè)問題绝淡，可以使用比原來大一倍的圖像宙刘，然后用css樣式強(qiáng)制把圖像的尺寸設(shè)為原來圖像尺寸的大小，就可以解決模糊的問題牢酵。
- 2.2荐类、清晰度解決過程示意圖：
清晰度解決過程示意圖
上圖是采用 CSS樣式強(qiáng)制改變 圖片的尺寸
三、background 新屬性 (background-size:)
-
3.1茁帽、background-size:的值
- length：用長度值指定背景圖像大小玉罐。不允許負(fù)值屈嗤。
- percentage：用百分比指定背景圖像大小。不允許負(fù)值吊输。
- auto：背景圖像的真實(shí)大小饶号。
- cover：將背景圖像等比縮放到完全覆蓋容器，背景圖像有可能超出容器季蚂。
- contain：將背景圖像等比縮放到寬度或高度與容器的寬度或高度相等茫船，背景圖像始終被包含在容器內(nèi)。
-
3.2扭屁、舉例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>background 新屬性</title> <style type="text/css"> .box{ width: 200px; height: 200px; border: 2px solid #000; margin: 50px auto 0; background: url("images/apple.png") no-repeat; background-size: 200px 200px; } </style> </head> <body> <div class="box"></div> </body> </html>提示：上面的：
background-size: 200px 200px;可以換為background-size: 100% 100%算谈、background-size: auto;、background-size: cover;料滥、background-size: contain;
四然眼、適配布局類型
-
4.1、適配布局類型介紹：設(shè)備屏幕有多種不同的分辨率葵腹，頁面適配方案有如下幾種：
- 1高每、全適配：響應(yīng)式布局+流體布局
- 2、移動(dòng)端適配：
- 流體布局+少量響應(yīng)式
- 基于rem的布局
-
4.2践宴、流體布局：就是使用百分比來設(shè)置元素的寬度鲸匿，元素的高度按實(shí)際高度寫固定值，流體布局中阻肩，元素的邊線無法用百分比带欢，可以使用樣式中的計(jì)算函數(shù)
calc()來設(shè)置寬度，或者使用box-sizing屬性將盒子設(shè)置為從邊線計(jì)算盒子尺寸烤惊。-
calc():可以通過計(jì)算的方式給元素加尺寸乔煞，比如：width：calc(25% - 4px); - box-sizing
- 1、content-box 默認(rèn)的盒子尺寸計(jì)算方式
- 2撕氧、border-box 置盒子的尺寸計(jì)算方式為從邊框開始瘤缩，盒子的尺寸喇完，邊框和內(nèi)填充算在盒子尺寸內(nèi)
-
-
4.3伦泥、響應(yīng)式布局：響應(yīng)式布局就是使用媒體查詢的方式，通過查詢?yōu)g覽器寬度锦溪，不同的寬度應(yīng)用不同的樣式塊不脯，每個(gè)樣式塊對(duì)應(yīng)的是該寬度下的布局方式，從而實(shí)現(xiàn)響應(yīng)式布局刻诊。響應(yīng)式布局的頁面可以適配多種終端屏幕（pc防楷、平板、手機(jī)）则涯。相應(yīng)布局的偽代碼如下：寫在樣式里面
@media (max-width:960px){ .left_con{width:58%;} .right_con{width:38%;} } @media (max-width:768px){ .left_con{width:100%;} .right_con{width:100%;} }
五复局、基于 rem 的布局
-
5.1冲簿、em單位與rem單位的介紹
em單位是參照元素自身的文字大小來設(shè)置尺寸，rem指的是參照根節(jié)點(diǎn)的文字大小亿昏，根節(jié)點(diǎn)指的是html標(biāo)簽峦剔，設(shè)置html標(biāo)簽的文字大小，其他的元素相關(guān)尺寸設(shè)置用rem角钩，這樣吝沫，所有元素都有了統(tǒng)一的參照標(biāo)準(zhǔn)，改變html文字的大小递礼，就會(huì)改變所有元素用rem設(shè)置的尺寸大小惨险。如下例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>em單位</title> <style type="text/css"> .box1{ font-size: 12px; width: 20em; height: 10em; background-color: gold; } .box2{ font-size: 20px; width: 20em; height: 10em; background-color: green; } p{ font-size: 20px; text-indent: 2em; } </style> </head> <body> <div class="box1"> </div> <br> <br> <div class="box2"> </div> <p>首先了解em單位，em單位是參照元素自身的文字大小來設(shè)置尺寸脊髓，rem指的是參照根節(jié)點(diǎn)的文字大小辫愉，根 節(jié)點(diǎn)指的是html標(biāo)簽，設(shè)置html標(biāo)簽的文字大小供炼，其他的元素相關(guān)尺寸設(shè)置用rem一屋， 這樣，所有元素都有了統(tǒng)一的參照標(biāo)準(zhǔn)袋哼，改變html文字的大小冀墨，就會(huì)改變所有元素用rem設(shè)置的尺寸大小。</p> </body> </html>提示：em是根據(jù) font-size 變化的涛贯，例如：如果：
font-size: 20px;,那么1em就是20px-
rem使用的一個(gè)例子诽嘉，如下
`rem` 使用的一個(gè)例子<!DOCTYPE html> <html lang="en" style="font-size: 20px"> <head> <meta charset="UTF-8"> <title>rem單位</title> <style type="text/css"> .box1{ font-size: 12px; width: 20rem; height: 10rem; background-color: gold; } .box2{ font-size: 20px; width: 20rem; height: 10rem; background-color: green; } </style> </head> <body> <div class="box1">我是12px大小</div> <br> <br> <div class="box2">我是20px大小</div> </body> </html>提示：
<html lang="en" style="font-size: 20px">中的font-size大小發(fā)生改變，其他一rem為單位的尺寸都會(huì)發(fā)生改變 弟翘，1rem=font-size:的大小-
cssrem 插件的安裝：可以動(dòng)態(tài)地將px尺寸換算成rem尺寸虫腋，進(jìn)入packages目錄：Sublime Text -> Preferences -> Browse Packages... 復(fù)制下載的cssrem目錄到剛才的packges目錄里。 重啟Sublime Text稀余。配置參數(shù) 參數(shù)配置文件：Sublime Text -> Preferences -> Package Settings -> cssrem px_to_rem - px轉(zhuǎn)rem的單位比例悦冀，默認(rèn)為40。 max_rem_fraction_length - px轉(zhuǎn)rem的小數(shù)部分的最大長度睛琳。默認(rèn)為6盒蟆。 available_file_types - 啟用此插件的文件類型。默認(rèn)為：
[".css", ".less", ".sass"]师骗。
-
