裝置高度： device-width, device-height
渲染視窗的寬高： width, height
裝置的手持方向： orientation
裝置的解析度： resolution
使用方法：
用外聯或者內嵌樣式
或者兩者同時搭配使用。
表示裝置物理實際的寬高
渲染視窗的寬高： width, height
"style.css"
type="text/css" rel="stylesheet"
media="onle screen and (max-width:640px)"
/>
其中的media="onle screen and (max-width:640px)"就是限制條件，當滿足當前螢幕的最大尺寸不大於640px時會使用style.css樣式中的規則
語法規則：
@media screen and (min-width:640px)
}style>
html ：**
lang="en">
charset="utf-8">
響應式布局title>
name="viewport"
content="width = decice=width,initial-scale=1">
rel="stylesheet"
type="text/css"
href="./css/style.css">
head>
class="heading">
div>
class="container clearfix">
class="left">
div>
class="main">
div>
class="right">
div>
div>
class="footing">
div>
body>
html>
css**：
*.heading,
.container,
.footing
.heading
.left,
.right,
.main
.footing
.clearfix
:after
/*尺寸在960px以上使用的規則*/
@media screen and (min-width: 960px)
.left,
.main,
.right
.right,
.left
.main
.container
.footing
}/*尺寸在960以下使用的規則*/
@media screen and (max-width: 960px)
.left,
.main
.right
.left
.main
}/*尺寸小於600px時使用的規則*/
@media screen and (max-width: 600px)
.left,
.right
.main
.right
.container
}
響應式布局 響應式布局技巧
一理解幾種布局的概念 1 靜態布局 static layout 即傳統web設計，對於pc設計乙個layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分 意思就是不管瀏覽器尺寸具體是多少，網頁布局就按照當時寫 的布局來布置 對於移動裝置，單獨設計乙個布局，使用不同的網域名稱如wap...
響應式布局
首先，什麼是響應式布局呢？響應式布局是2010年5月提出的乙個概念，簡單地說就是乙個 能夠相容多個終端，而不是為每個終端做乙個特定的版本。這個概念是為了解決移動網際網路瀏覽器而產生的，目的是為使用者提供更加舒適的介面以及良好的使用者體驗。優點 1.面對不同解析度裝置靈活性強 2.能夠方便的解決多裝置...
響應式布局
什麼是響應式？響應式 web 設計是乙個讓使用者通過各種尺寸的裝置瀏覽 獲得良好的視覺效果的方法。實現 charset utf 8 name viewport content width device width,initial scale 1.0 1 1縮放使用 查詢 查詢可以被用在css中的 m...