通過媒體查詢
媒體查詢的方式可以說是我早期采用的布局方式, 它主要是通過查詢設備的寬度來執行不同的 css 代碼，最終達到界面的適配。
媒體查詢優勢
- 簡單, 哪里不對改哪里
- 調整屏幕寬度的時候不用刷新頁面, 即可響應式的進行展示
- 特別適合對移動端和 PC 維護同一套代碼的時候
媒體查詢劣勢
- 由於移動端和 PC 端維護同一套代碼, 所以代碼量比較大，維護不方便
- 為了兼顧大屏幕或高清設備，會造成其他設備資源浪費，特別是加載的圖片資源
- 為了兼顧移動端和 PC 端各自響應式的展示效果，難免會損失各自特有的交互方式
應用場景
- 對於比較簡單(界面不復雜)的網頁, 諸如: 企業官網、宣傳單網頁等
- 我們可以通過
媒體查詢、伸縮布局、Bootstrap來實現響應式站點 - 對於比較復雜(界面復雜)的網頁, 諸如: 電商、團購等
- 更多的則是采用 PC 端一套代碼, 移動端一套代碼的方式
如下我將會給出一個示例布局代碼，就是來演示一下移動端常用的布局方式當中的通過媒體查詢實現的方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>移動端常用適配方案一</title>
<style>
* {
margin: 0;
padding: 0;
}
.top {
position: relative;
}
.top > img {
width: 100%;
height: auto;
}
.top > p {
font-size: 16px;
color: #fff;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 33px;
}
.middle, .bottom {
position: relative;
height: 124px;
}
.main {
border: 1px dashed #0d7efb;
border-radius: 5px;
padding: 4px;
display: inline-block;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.main > img:nth-of-type(1) {
width: 175px;
height: 116px;
vertical-align: bottom;
}
.main > img:nth-of-type(2) {
width: 35px;
height: 35px;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 25px;
}
.bottom {
margin-top: 14px;
}
/*
iPhone 6/7/8
*/
@media screen and (min-width: 375px) {
.top > p {
font-size: 18px;
top: 40px;
}
.middle, .bottom {
height: 143px;
}
.main > img:nth-of-type(1) {
width: 206px;
height: 135px;
}
.main > img:nth-of-type(2) {
width: 42px;
height: 42px;
top: 30px;
}
.bottom {
margin-top: 17px;
}
}
/*
iphone 6/7/8Plus
*/
@media screen and (min-width: 414px) {
.top > p {
font-size: 20px;
top: 43px;
}
.middle, .bottom {
height: 160px;
padding: 5px;
}
.main > img:nth-of-type(1) {
width: 227px;
height: 150px;
}
.main > img:nth-of-type(2) {
width: 45px;
height: 45px;
top: 35px;
}
.bottom {
margin-top: 19px;
}
}
</style>
</head>
<body>
<div class="top">
<img src="images/bg.png" alt="">
<p>實名認證</p>
</div>
<div class="middle">
<div class="main">
<img src="images/back.png" alt="">
<img src="images/add.png" alt="">
</div>
</div>
<div class="bottom">
<div class="main">
<img src="images/back.png" alt="">
<img src="images/add.png" alt="">
</div>
</div>
</body>
</html>
如上代碼當中的素材以及測試效果博主這里就只是提供對應的素材文件，至於測試效果自行測試驗證即可，其實通過媒體查詢的方式進行實現在這里博主是不怎么推薦的，就因如上它所包含的那些劣勢，就足以不推薦所以說，在下一篇文章當中我會在介紹另外一種，就是 PC 端一套代碼，移動端一套代碼的方式。