HTML5與CSS3視口-retina螢幕適配
1.視口
視口是移動裝置上用來顯示網頁的區域，一般會比移動裝置可視區域大，寬度可能是980px或者1024px，目的是為了顯示下整個為PC端設計的網頁，這樣會讓移動端出現橫向滾動條，為了避免這種情況，移動端會將視口縮放到移動端視窗的大小，這樣會讓網頁不容易觀看，可以使用meta標籤，name="viewport"來設定視口的大小，將視口的大小設定為和移動裝置可視區一樣的大小。
<head>
<meta charset="utf-8">
<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>
2.視網膜螢幕（retina螢幕）清晰度解決方案
影象在視網膜螢幕上顯示的大小和在一般螢幕上顯示的大小一樣，但是由於視網膜螢幕的物理畫素點比一般的螢幕小，影象在上面好像是被放大了，影象會變得模糊，為了解決這個問題，可以使用比原來大一倍的影象，然後用CSS樣式強制把影象的尺寸設為原來影象尺寸的大小。
3.background新屬性
（1）background-size：
length：用長度值指定背景影象大小，不允許負值
percentage：用百分比指定背景影象大小，不允許負值
auto：背景影象的真實大小
cover：將背景影象等比例縮放到完全覆蓋容器，背景影象有可能超出容器
contain：將背景影象等比例縮放到寬度和高度與容器的寬高相等，背景影象始終被包含在容器內
<head>
<meta charset="utf-8">
<title>scale</title>
<style type="text/css">
.box{
width: 300px;
height: 300px;
border: 1px solid #000;
background: url(images/3_02.png) no-repeat;
/*background-size: 100%,100%;*/ /*用指定大小，縮放不成功*/
/*background-size: auto; */ /*背景圖真實大小*/
/*background-size: contain;*/ /*按寬高等比例縮放*/
background-size: cover; /*等比例縮放到完全覆蓋容器*/
margin: 50px auto 0;
}
</style></head>
<body>
<div class="box"></div></body>
4.PC級移動端頁面適配方法
（1）全適配：響應式佈局+流體佈局
（2）移動端適配：
流體佈局+少量響應式
基於rem的佈局
（3）流體佈局
就是使用百分比來設定元素的寬度，元素的高度按實際高度寫固定值，流體佈局中，元素的邊線無法用百分比，可以使用樣式中的計算函式calc（）來設定高度，或者使用box-sizing屬性將盒子設定為從邊線計算盒子尺寸。
calc（）
可以通過計算的方式給元素加尺寸，比如：width：calc（25%-4px）;
box-sizing
content-box預設的盒子尺寸計算方式
border-box設定盒子的尺寸計算方式為從邊框開始，盒子的尺寸，邊框和內填充算在盒子尺寸內。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<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">
body{
margin: 0px;
}
.box a{
display: block;
/*width: calc(25% - 4px);*/ /*方法一計算函式，整體25%-邊框的4個畫素*/
width: 25%;
height: 100px;
background-color: aqua;
float: left;
text-align: center;
line-height: 100px;
text-decoration: none;
color: antiquewhite;
border: 1px solid #5B5758;
box-sizing: border-box; /*方法二：設定盒子的計算方式從邊框開始算*/
}
</style></head>
<body>
<div class="box">
<a href="#">選單</a>
<a href="#">選單</a>
<a href="#">選單</a>
<a href="#">選單</a>
</div></body>
</html>
（4）響應式佈局
式使用媒體查詢方式，通過查詢瀏覽器寬度，不同的寬度應用不同的樣式塊，每個樣式塊對應的是該寬度下的佈局方式，從而實現響應式佈局。響應式佈局的頁面可以適配多種終端螢幕（pc、平板、手機）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>響應式佈局</title>
<style type="text/css">
.box a{
display: block;
width: 23%;
height: 100px;
background-color: blueviolet;
margin: 1%;
float: left;
text-align: center;
text-decoration: none;
line-height: 100px;
}
@media (max-width:800px){ /*當螢幕小於800px執行以下樣式*/
.box a{
width: 46%;
margin: 2%;
}
}
@media (max-width:500px){ /*當螢幕小於500px執行以下樣式*/
.box a{
width: 94%;
margin: 3%;
}
}
</style></head>
<body>
<div class="box">
<a href="#">1.哈哈哈</a>
<a href="#">2.哈哈哈</a>
<a href="#">3.哈哈哈</a>
<a href="#">4.哈哈哈</a>
</div></body>
</html>
