一、 常見(jiàn)布局
1.靜態(tài)布局
傳統(tǒng)web布局荔仁。固定大小伍宦，在屏幕大小進(jìn)行調(diào)整使其出現(xiàn)滾動(dòng)條，使用滾動(dòng)條實(shí)現(xiàn)頁(yè)面的瀏覽乏梁。
不管設(shè)備的尺寸大小是多少次洼，都會(huì)按照原來(lái)設(shè)置的大小顯示。
對(duì)于移動(dòng)端布局來(lái)說(shuō)使用一個(gè)單獨(dú)的布局遇骑，比如m站或者wap站卖毁。
2.自適應(yīng)布局
分別為不同的屏幕分辨率設(shè)置布局，布局切換時(shí)頁(yè)面元素發(fā)生變化落萎，但是在每一個(gè)布局中亥啦，頁(yè)面元素不隨著窗口大小的調(diào)整發(fā)生變化。
可以將自適應(yīng)布局看成是靜態(tài)布局的一個(gè)特例练链。元素大小不變翔脱，位置自動(dòng)適應(yīng)變化。主要是浮動(dòng)設(shè)計(jì)兑宇。
3.流式布局
流式布局也叫作百分比布局碍侦。元素的大小會(huì)隨著窗口的大小進(jìn)行調(diào)整粱坤，但是元素的位置不會(huì)發(fā)生變化隶糕。
主要的問(wèn)題是如果設(shè)計(jì)的頁(yè)面很大，那么在小屏幕設(shè)備上要顯示就會(huì)出現(xiàn)變形問(wèn)題站玄。
4.伸縮布局
伸縮盒子或者彈性盒子布局枚驻，CSS3提供的一種全新布局方式。IE不支持株旷。僅使用在移動(dòng)端布局再登。
5.響應(yīng)式布局
分別為不同的屏幕分辨率定義布局尔邓，同時(shí)在每一個(gè)布局中要是用流式布局的理念，也就是元素的寬度會(huì)隨著窗口的大小進(jìn)行調(diào)整锉矢。
可以把響應(yīng)式布局看成是流式布局與自適應(yīng)布局的結(jié)合梯嗽。
優(yōu)點(diǎn)：針對(duì)不同的設(shè)備，都能夠完美的展示效果沽损。
缺點(diǎn)：開(kāi)發(fā)者需要多套設(shè)備的設(shè)計(jì)樣式灯节，維護(hù)開(kāi)發(fā)成本高。
二绵估、 響應(yīng)式布局
1．什么是響應(yīng)式
前提：和設(shè)備無(wú)關(guān)炎疆。
2．響應(yīng)式的使用場(chǎng)景
3．設(shè)備類型
媒體的類型：
手機(jī)、電腦国裳、ipad形入、手表、電視缝左、眼鏡
打印機(jī)
iReader亿遂、 kindle
CSS媒體的分類
媒體查詢的語(yǔ)法：
@media only|not|all 設(shè)備類型 {
}
如果指定的多媒體類型匹配設(shè)備類型則查詢結(jié)果返回 true，文檔會(huì)在匹配的設(shè)備上顯示指定樣式效果盒使。
除非你使用了 not 或 only 操作符崩掘，否則所有的樣式會(huì)適應(yīng)在所有設(shè)備上顯示效果。
4．CSS引用方式
1) link
<link type=”text/css” rel=”stylesheet” href=”” media=”screen” />
2) @import
在style標(biāo)簽或者CSS文件中使用
@import url() screen少办；
3) @media
在style標(biāo)簽或者CSS文件中使用
@media screen{}
@media print{}
5．媒體查詢
CSS3在web開(kāi)發(fā)中引入了一個(gè)新的詞叫做設(shè)備斷點(diǎn)苞慢。意思是不同設(shè)備寬度的臨界值。在媒體查詢中英妓，mix-width與max-width所對(duì)應(yīng)的就是臨界值挽放。
常見(jiàn)設(shè)備的臨界值：<u>https://www.cnblogs.com/daxiang/p/4568938.html</u>
/*#region Bootstrap Media Query */
/* 超小屏幕（手機(jī)，小于 768px） */
/* 小屏幕（平板蔓纠，大于等于 768px） */
@media (min-width: 768px) {}
/* 中等屏幕（桌面顯示器辑畦，大于等于 992px） */
@media (min-width: 992px) {}
/* 大屏幕（大桌面顯示器，大于等于 1200px） */
@media (min-width: 1200px) {}
/* screen-xs-max */
@media (max-width: 767px) {}
/* screen-sm-min & screen-sm-max */
@media (min-width: 768px) and (max-width: 991px) {}
/* screen-md-min & screen-md-max */
@media (min-width: 992px) and (max-width: 1199px) {}
/* screen-lg-min */
@media (min-width: 1200px) {}
/*#endregion */
三腿倚、 移動(dòng)端適配
同樣是3.5英寸的屏幕纯出，但是后者是使用retina技術(shù)實(shí)現(xiàn)的，分辨率足足的高了一倍敷燎。如果把三代的內(nèi)容放在四代機(jī)中顯示暂筝，就會(huì)縮小。同樣如果是pc端的內(nèi)容拿到手機(jī)端顯示硬贯，就會(huì)顯得非常的大焕襟。
如何能夠在像素分辨率越來(lái)越高的移動(dòng)設(shè)備上顯示正常能夠閱讀的文也稱為一個(gè)問(wèn)題。
1．CSS像素與設(shè)備像素
重新認(rèn)識(shí)像素：像素是個(gè)長(zhǎng)度單位嗎饭豹？pt 與 px
css像素和設(shè)備像素之間是一種可變的轉(zhuǎn)化關(guān)系鸵赖。在100%縮放比例下务漩，1個(gè)css像素等于1個(gè)設(shè)備像素。在表示某一數(shù)目的css像素時(shí)它褪，在放大狀態(tài)下使用了更多的設(shè)備像素饵骨，而在縮小狀態(tài)下使用了更少的設(shè)備像素。這就是css像素和設(shè)備像素的概念茫打。
對(duì)前端開(kāi)發(fā)來(lái)說(shuō)宏悦，設(shè)備像素沒(méi)有意義，我只會(huì)關(guān)心css像素包吝。只有css像素才描述了網(wǎng)頁(yè)的布局與外觀饼煞，我只需要讓我的網(wǎng)頁(yè)在100%縮放比例下看起來(lái)不錯(cuò)就可以了。
在顯示技術(shù)的早期诗越，這倆個(gè)概念可以理解為一個(gè)概念砖瞧，就是像素顆粒。但是隨著retina屏幕的興起嚷狞。設(shè)備像素與CSS像素已經(jīng)不再是一個(gè)相同的概念了块促。
設(shè)備像素是指屏幕上最小的發(fā)色單元，比如在普通的LCD屏幕上床未，任意一個(gè)發(fā)色單元都是由紅綠藍(lán)三個(gè)發(fā)光液晶單元構(gòu)成的竭翠。
CSS像素是與屏幕分辨率有關(guān)的，比如一塊1920 X 1080的24英寸屏幕上薇搁，我們假設(shè)屏幕的設(shè)備像素點(diǎn)都是正方形斋扰，那么一個(gè)像素點(diǎn)的邊長(zhǎng)X與屏幕的尺寸有關(guān)系。
計(jì)算得出X的大小為0.011英寸啃洋。大概[圖片上傳失敗...(image-c963e5-1553564302076)] 是0.28mm传货。
如果改變屏幕的分辨率，比如設(shè)置為1280 X 720 宏娄，大概像素大小為0.0165英寸问裕。
3．PPI與設(shè)備像素比
PPI是指像素密度。愿意是pixels pre ratio 孵坚，就是每英寸的像素?cái)?shù)粮宛。這里的像素是指設(shè)備像素。
對(duì)于前面提到的0.011像素的屏幕每英寸像素?cái)?shù)大概是90個(gè)卖宠。即PPI為90.
ipone的屏幕分辨率：https://blog.csdn.net/amyloverice/article/details/79389357 對(duì)于ipone4以后的產(chǎn)品巍杈，其PPI都達(dá)到了326，相同的屏幕大小要比很多機(jī)器高很多逗堵。此時(shí)如果CSS像素再與設(shè)備像素保持一致秉氧，人眼將很難看清較小的文字或者圖案眷昆。因此像ipone這樣的設(shè)備蜒秤，系統(tǒng)采用了折中的方式汁咏，將系統(tǒng)分辨率調(diào)整為物理分辨率的1/2或者2/3.這樣就能使的肉眼能夠獲得更好的視覺(jué)體驗(yàn)。也不會(huì)因?yàn)橐曈X(jué)單元太小為疲勞作媚，此時(shí)2或者1.5被稱為設(shè)備像素比攘滩，通過(guò)這個(gè)設(shè)備像素比可以判斷設(shè)備是否為retina設(shè)備，在JavaScript中可以使用window.devidePixelRatio的值來(lái)判斷纸泡。
4．視口
視口的概念在桌面布局中就存在漂问，視口的單位是CSS像素。視口的大小決定了頁(yè)面布局的可用寬度女揭。
通常為960px蚤假。
為了解決視口顯示不完整的問(wèn)題。
移動(dòng)端將視口分為倆種：視覺(jué)視口與布局視口吧兔。
1) 視覺(jué)視口
visual viewport（視覺(jué)視口）設(shè)備物理屏幕的可視區(qū)域磷仰。
2) 布局視口
一般移動(dòng)設(shè)備的瀏覽器都默認(rèn)設(shè)置了一個(gè)viewport 元標(biāo)簽，定義一個(gè)虛擬的layout viewport（布局視口）境蔼，用于解決早期的頁(yè)面在手機(jī)上顯示的問(wèn)題灶平。iOS, Android基本都將這個(gè)視口分辨率設(shè)置為 980px，所以pc上的網(wǎng)頁(yè)基本能在手機(jī)上呈現(xiàn)箍土，只不過(guò)元素看上去很小逢享，一般默認(rèn)可以通過(guò)手動(dòng)縮放網(wǎng)頁(yè)。
在移動(dòng)端吴藻，默認(rèn)的情況下瞒爬，布局視口的寬度是要遠(yuǎn)遠(yuǎn)大于瀏覽器的寬度的。這兩個(gè)視口不同于PC端沟堡，是相互獨(dú)立存在的疮鲫。為什么呢？試想一下弦叶，如果一個(gè)網(wǎng)頁(yè)不對(duì)移動(dòng)端進(jìn)行適配俊犯，用戶進(jìn)行閱讀的時(shí)候，如果默認(rèn)情況下布局視口的寬度等于瀏覽器寬度伤哺，那是不是展示起來(lái)更加的不友好燕侠。也就是說(shuō)，如果一個(gè) div的寬度為20%立莉，那么它在布局視口寬度為 980px的時(shí)候绢彤，展示給用戶的像素還有196px，而如果寬度只有 375px的情況下蜓耻，寬度只有 75px茫舶，展示的大小相差特別大。
所以刹淌，瀏覽器廠商為了讓用戶在小屏幕下網(wǎng)頁(yè)也能夠顯示地很好饶氏，所以把布局視口寬度設(shè)置地很大讥耗，一般在 768px~1024px之間，最常見(jiàn)的寬度是 980px疹启。這個(gè)寬度可以通過(guò) document.documentElement.clientWidth得到古程。
瀏覽器可以使用mate標(biāo)簽設(shè)置這個(gè)值。
<meta name=”viewport” content=”width=640” />
此時(shí)整個(gè)頁(yè)面最大的CSS寬度是640px喊崖。你的CSS布局代碼都會(huì)基于這個(gè)基礎(chǔ)值進(jìn)行運(yùn)算挣磨。
3) ideal viewport（理想視口）和 dip （設(shè)備邏輯像素）
ideal viewport（理想視口）通常是我們說(shuō)的屏幕分辨率。
dip （設(shè)備邏輯像素）跟設(shè)備的硬件像素?zé)o關(guān)的荤懂。一個(gè) dip 在任意像素密度的設(shè)備屏幕上都占據(jù)相同的空間茁裙。
比如MacBook Pro的 Retina （視網(wǎng)膜）屏顯示器硬件像素是：2880 *?1800。當(dāng)你設(shè)置屏幕分辨率為 1920 * 1200 的時(shí)候节仿，ideal viewport（理想視口）的寬度值是1920像素呜达， 那么 dip 的寬度值就是1920。設(shè)備像素比是1.5（2880/1920）粟耻。設(shè)備的邏輯像素寬度和物理像素寬度（像素分辨率）的關(guān)系滿足如下公式：
邏輯像素寬度*倍率 = 物理像素寬度
而移動(dòng)端手機(jī)屏幕通常不可以設(shè)置分辨率查近，一般都是設(shè)備廠家默認(rèn)設(shè)置的固定值，換句話說(shuō) dip 的值就是 ideal viewport（理想視口）（也就是分辨率）的值挤忙，比如霜威，iPhone的屏幕分辨率。所以最好的辦法就是將布局視口與這個(gè)分辨率設(shè)置相同册烈。
4) viewport的參數(shù)
<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">
width=device-width 也就是將layout viewport（布局視口）的寬度設(shè)置 ideal viewport（理想視口）的寬度戈泼。網(wǎng)頁(yè)縮放比例為100%時(shí)，一個(gè)CSS像素就對(duì)應(yīng)一個(gè) dip（設(shè)備邏輯像素）
5) 參考文檔
<u>https://www.w3cplus.com/css/viewports.html</u>
<u>http://www.cnblogs.com/2050/p/3877280.html</u>
<u>http://web.jobbole.com/90075/</u>
<u>http://www.reibang.com/p/64877ce6e893</u>[圖片上傳失敗...(image-fde25f-1553564302078)]
ipad
簡(jiǎn)單的移動(dòng)端適配案例：
html代碼：
<body>
<div class="container">
<img src="./images/687474703a2f2f7777772e773363706c75732e636f6d2f73697465732f64656661756c742f66696c65732f626c6f67732f323031352f313531312f72656d2d312e6a7067.jpg" alt="">
</div>
</body>
css：
*{
padding:0 ;
margin:0;
}
body{
min-width:100%;
}
@media (min-width:12.266667rem)
{.container {
width: 12.266667rem;
}
@media (min-width:10.24rem)
{.container {
width: 10.0rem;
}
@media (min-width: 4.266667rem)
{.container {
width:320px;
}
.container{
width:10.0rem;
margin:0 auto;
}
.container>img{
width:100%;
height:100%;
}
js代碼
<script>
/(iPhone|iPad|iPhone OS|Phone|iPod|iOS)/i.test(navigator.userAgent)&&(head=document.getElementsByTagName('head'),viewport=document.createElement('meta'),viewport.name='viewport',viewport.content='target-densitydpi=device-dpi, width=480px, user-scalable=no',head.length>0&&head[head.length-1].appendChild(viewport));
</script>
完整代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no,email=no" name="format-detection">
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
<title>手淘</title>
<link rel="stylesheet" href="./css/shoutao1.css">
</head>
<body>
<div class="container">
<img src="./images/687474703a2f2f7777772e773363706c75732e636f6d2f73697465732f64656661756c742f66696c65732f626c6f67732f323031352f313531312f72656d2d312e6a7067.jpg" alt="">
</div>
</body>
<script>
/(iPhone|iPad|iPhone OS|Phone|iPod|iOS)/i.test(navigator.userAgent)&&(head=document.getElementsByTagName('head'),viewport=document.createElement('meta'),viewport.name='viewport',viewport.content='target-densitydpi=device-dpi, width=480px, user-scalable=no',head.length>0&&head[head.length-1].appendChild(viewport));
</script>
</html>
引入插件：
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no,email=no" name="format-detection">
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
效果：
