實現響應式布局的方法總結
阿新 • • 發佈：2019-04-12
ipa href dev align ipad rfi device 底部 init
為什麽要實現響應式布局？
目的：為了網頁能夠兼容不同的終端
參考各種手機型號的分辨率
http://screensiz.es/phone 是一個前端開發者必備的一個網站，上面列出了市面上大部分常見機型的分辨率大小。
實現方法：
1.設置meta標簽，禁止用戶縮放
使用 viewport meta 標簽在手機瀏覽器上控制布局，user-scalable屬性能夠解決ipad切換橫屏之後觸摸才能回到具體尺寸的問題。 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"user-scalable=no" /> 通過快捷方式打開時全屏顯示 <meta name="apple-mobile-web-app-capable" content="yes" /> 隱藏狀態欄 <meta name="apple-mobile-web-app-status-bar-style" content="blank" /> iPhone會將看起來像電話號碼的數字添加電話連接，應當關閉 <meta name="format-detection" content="telephone=no" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="HandheldFriendly" content="true">
2.通過媒介查詢來設置樣式Media Queries
Media Queries 是響應式設計的核心
它根據條件告訴瀏覽器如何為指定視圖寬度渲染頁面。假定一個終端的分辨率<980px,可以這樣寫：
直接在css文件上使用
@media screen and (max-width:980px) {
#head {...}
#content{ ... }
#footer {...}
}
<style media="screen and (min-width:340px) and (max-width:720px)">
body{
background:rgb(16,136,65);
}
</style>
或者導入外文件
<link rel = "stylesheet" href = " " meida ="screen and (min-width:340px) and (max-width:720px)">
假設要兼容ipad和iphone視圖，我們可以這樣設置：
/**ipad**/
@media only screen and (min-width:768px)and(max-width:1024px){}
/**iphone**/
@media only screen and (width:320px)and (width:768px){}
3.設置字體
rem是相對於根元素的，之前先重置根元素的大小
html{font-size:100%;}
完成後，你可以定義響應式字體：
@media (min-width:640px){body{font-size:1rem;}}
@media (min-width:960px){body{font-size:1.2rem;}}
@media (min-width:1200px){body{font-size:1.5rem;}}
4.寬度不固定，使用百分比
#head{width:100%;}
#content{width:50%;}
6.圖片處理
#wrap img{
max-width:100%;
height:auto;
}
如此設置後ID為wrap內的圖片會根據wrap的寬度改變已達到等寬擴充，height為auto的設置是為了保證圖片原始的高寬比例，以至於圖片不會失真。
設置背景圖
#log a{display:block;
width:100%;
height:40px;
text-indent:55rem;//縮進
background-img:url(logo.png);
background-repeat:no-repeat;
background-size:100% 100%;
}
background-size是css3的新屬性，用於設置背景圖片的大小，有兩個可選值，第一個值用於指定背景圖的width,第2個值用於指定背景圖的height,如果只指定一個值，那麽另一個值默認為auto。
background-size:cover; 等比擴展圖片來填滿元素
background-size:contain; 等比縮小圖片來適應元素的尺寸
7.表格的響應式布局
舉個例子
// index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" href="index.css"/> <link rel="stylesheet" type="text/css" href="index01.css" media="screen and (max-width:1024px) and (min-width:720px)"/> <link rel="stylesheet" type="text/css" href="index02.css" media="screen and (max-width:720px)"/> </head> <body> <div class="header">頭部</div> <div class="main clearfix"> <div class="left">左邊</div> <div class="center">中間</div> <div class="right">右邊</div> </div> <div class="footer">底部</div> </body> </html>
// index.css
*{
margin:0;
padding:0;
text-align:center;
color:yellow;
}
.header{
width:100%;
height:100px;
background:#ccc;
line-height:100px;
}
.main{
background:green;
width:100%;
}
.clearfix:after{
display:block;
height:0;
content:"";
visibility:hidden;
clear:both;
}
.left,.center,.right{
float:left;
}
.left{
width:20%;
background:#112993;
height:300px;
font-size:50px;
line-height:300px;
}
.center{
width:60%;
background:#ff0;
height:400px;
color:#fff;
font-size:50px;
line-height:400px;
}
.right{
width:20%;
background:#f0f;
height:300px;
font-size:50px;
line-height:300px;
}
.footer{
width:100%;
height:50px;
background:#000;
line-height:50px;
}
//index01.css
.right{
float:none;
width:100%;
background:#f0f;
clear:both;
}
.left{
width:30%;
}
.center{
width:70%;
}
.main{
height:800px;
}
//index02.css
.left,.center,.right{
float:none;
width:100%;
}
結果運行如下
實現響應式布局的方法總結