html調適型配置，@media screen，媒體查詢

最後更新：2017-08-02 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：連結 hone firefox 檔案 span 語句 mil 頭部不同

html調適型配置，@media screen，媒體查詢

自適應程式碼範例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>響應式布局</title>
<style type="text/css">

*{padding:0px; margin:0px; font-family:"微軟雅黑";}
#header{height:100px; border:solid 1px red; margin:0px auto;}
#main{margin:10px auto; height:400px;}
#footer{margin:0px auto; height:100px; border:solid 1px red;}
/*螢幕寬度大於900的時候*/
@media screen and (min-width:900px){
#header,#footer{width:800px;}
#main{width:800px; height:400px;}
#main-left{width:200px; height:400px; border:solid 1px red; float:left;}
#main-center{width:394px; height:400px; border:solid 1px red; float:left;}
#main-right{width:200px; height:400px; border:solid 1px red;float:left;}
}
/*螢幕寬度大於600，小於900的時候*/
@media screen and (min-width:600px) and (max-width:900px){
#header,#footer{width:600px;}
#main{width:600px; height:400px;}
#main-left{width:200px; height:400px; border:solid 1px red; float:left;}
#main-center{width:396px; height:400px; border:solid 1px red; float:left;}
#main-right{display:none;}
}
/*螢幕寬度小於600的時候*/
@media screen and (max-width:600px){

#header,#footer{width:300px;}
#main{width:300px; height:400px;}
#main-left{display:none;}
#main-center{width:300px; height:400px; border:solid 1px red;}
#main-right{display:none;}
}
</style>
</head>
<body>
<div id="header">頭部</div>
<div id="main">
<div id="main-left">內容-左邊</div>
<div id="main-center">內容-中間</div>
<div id="main-right">內容-右邊</div>
</div>
<div id="footer">底部</div>
</body>
</html>

/*連結寫法*/<link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">

1、在HTML頭部增加viewport標籤。

　　在網站HTML檔案的開頭，增加viewport meta標籤告訴瀏覽器視口寬度等於裝置螢幕寬度，且不進行初始縮放。代碼如下：

　　這段代碼支援Chrome、Firefox、IE9以上的瀏覽器，但不支援IE8以及低於IE8的瀏覽器。

2、在CSS檔案尾部增加針對不同螢幕解析度的規則。

　　例如使用如下的代碼，可以讓螢幕寬度低於480像素的裝置（如iPhone等），網頁側欄隱藏中部內容欄寬度自動調節。以下代碼針對Z-Blog，WordPress相關標籤名稱只需修改一下即可。

@media screen and (max-device-width: 480px) {
#divMain{
float: none;
width:auto;
}
#divSidebar {
display:none;
}
}

　　3、布局寬度使用相對寬度。

　　網頁總體架構可以使用絕對寬度，但往下的內容架構、側欄等最好使用相對寬度，這樣針對不同解析度進行修改就方便。當然也可以不用相對寬度，那就需要在 @media screen and (max-device-width: 480px) 裡面增加各個div的針對小螢幕的寬度，實際上更麻煩。

　　4、頁面使用相對字型（非必要）

　　在HTML頁面上不要使用絕對字型（px），而要使用相對字型（em），對於大多數瀏覽器來說，通常用 em = px/16 換算，例如16px就等於1em。

　　5、圖片自適應（非必要）

　　img標籤的話，只需要設定 max-width: 100%;或width:100%; 語句為：img { max-width: 98%; }

　　css載入的background-image如何自適應大小呢，其實CSS3中是可以實現的，添加如下語句：background-size:100% 100%;

html調適型配置，@media screen，媒體查詢

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More