使用vw、vh的使用教程
使用rem的背景：
由於目前手機機型越來越多,尺寸也越來越多，小到iphone 5s、iphone SE的4.0屏,大到iphone 7 plus，一些安卓還有更大的機型，如果只針對一個尺寸設計頁面,在別的機型上樣式可能會很不協調，甚至整體樣式錯亂。
與rem對比?
rem:響應式佈局的單位我們第一時間會想到通過rem單位來實現適配，但是它還需要內嵌一段腳本去動態計算跟元素大小。
vw/vh/vmin/vmax的含義
（1）vw、vh、vmin、vmax 是一種視窗單位，也是相對單位。它相對的不是父節點或者頁面的根節點。而是由視窗（Viewport）大小來決定的，單位 1，代表類似於 1%。
視窗(Viewport)是你的瀏覽器實際顯示內容的區域—，換句話說是你的不包括工具欄和按鈕的網頁瀏覽器。
（2）具體描述如下：
- vw：視窗寬度的百分比（1vw 代表視窗的寬度爲 1%）
- vh：視窗高度的百分比
- vmin：當前 vw 和 vh 中較小的一個值
- vmax：當前 vw 和 vh 中較大的一個值
瀏覽器兼容性
（1）桌面 PC
- Chrome：自 26 版起就完美支持（2013年2月）
- Firefox：自 19 版起就完美支持（2013年1月）
- Safari：自 6.1 版起就完美支持（2013年10月）
- Opera：自 15 版起就完美支持（2013年7月）
IE：自 IE10 起（包括 Edge）到現在還只是部分支持（不支持 vmax，同時 vm 代替 vmin）
（2）移動設備
Android：自 4.4 版起就完美支持（2013年12月）
iOS：自 iOS8 版起就完美支持（2014年9月）
使用scss預處理編譯實現單位轉化
scss->css方法：
我是使用vscode開發：
easyscss插件，scss轉css
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./demo.css">
</head>
<body>
<div class="banner">
<img src="./images/banner.jpg">
</div>
<div class="kz_goods">
<ul class="am-margin-bottom-0">
<!-- 商品123 -->
<li class="am-padding-0 kz_goods_item">
<div class="am-padding-horizontal-0 kz_good_left">
<div class="kz_discount">
<div class="kz_discount_pic">首月半價</div>
<p class="am-text-xs">僅限租完即送使用</p>
</div>
<a href="https://www.kuaizu365.cn/items/1321">
<img src="./images/product1.jpg" width="100%" height="100%">
</a>
</div>
<div class="am-text-default kz_good_right">
<a class="am-text-default" href="https://www.kuaizu365.cn/items/1321">
<h3 class="am-text-sm am-text-truncate">聯想拯救者R720 15.6寸遊戲本</h3>
<h5 class="am-text-xs am-text-truncate">I7-7700HQ/8G/1T+128G SSD/獨顯2G </h5>
</a>
<div class="am-text-xs advantage">
<span>霸7來襲</span>
<span>10力全開</span>
</div>
<div class="info-bottom">
<p class="kz_price">
<span>￥</span><span class="price_num">329</span>/月
</p>
<a class="am-text-xs go_buy" href="https://www.kuaizu365.cn/items/1321">立即搶購</a>
</div>
</div>
</li>
<li class="am-padding-0 kz_goods_item">
<div class="am-padding-horizontal-0 kz_good_left">
<div class="kz_discount">
<div class="kz_discount_pic">首月半價</div>
<p class="am-text-xs">僅限租完即送使用</p>
</div>
<a href="https://www.kuaizu365.cn/items/1321">
<img src="./images/product1.jpg" width="100%" height="100%">
</a>
</div>
<div class="am-text-default kz_good_right">
<a class="am-text-default" href="https://www.kuaizu365.cn/items/1321">
<h3 class="am-text-sm am-text-truncate">聯想拯救者R720 15.6寸遊戲本</h3>
<h5 class="am-text-xs am-text-truncate">i5/8G內存/128G SSD/集顯</h5>
</a>
<div class="am-text-xs advantage">
<span>霸7來襲</span>
<span>10力全開</span>
</div>
<div class="info-bottom">
<p class="kz_price">
<span>￥</span><span class="price_num">329</span>/月
</p>
<a class="am-text-xs go_buy" href="https://www.kuaizu365.cn/items/1321">立即搶購</a>
</div>
</div>
</li>
<li class="am-padding-0 kz_goods_item">
<div class="am-padding-horizontal-0 kz_good_left">
<div class="kz_discount">
<div class="kz_discount_pic">首月半價</div>
<p class="am-text-xs">僅限租完即送使用</p>
</div>
<a href="https://www.kuaizu365.cn/items/1321">
<img src="./images/product1.jpg" width="100%" height="100%">
</a>
</div>
<div class="am-text-default kz_good_right">
<a class="am-text-default" href="https://www.kuaizu365.cn/items/1321">
<h3 class="am-text-sm am-text-truncate">聯想拯救者R720 15.6寸遊戲本</h3>
<h5 class="am-text-xs am-text-truncate">i5/8G內存/128G SSD/集顯</h5>
</a>
<div class="am-text-xs advantage">
<span>霸7來襲</span>
<span>10力全開</span>
</div>
<div class="info-bottom">
<p class="kz_price">
<span>￥</span><span class="price_num">329</span>/月
</p>
<a class="am-text-xs go_buy" href="https://www.kuaizu365.cn/items/1321">立即搶購</a>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
scss
* {margin:0;padding: 0;}
a { text-decoration: none;}
body { background-color: #bcd68f;}
$vm_base: 640;
// 單位轉化
@function vm($px) {
@return ($px / 640) * 100vw;
}
.banner {
width: 100%;
img { width: 100%;}
}
.kz_goods {
padding: 0 6px 10px;
.kz_goods_item {
position: relative;
display: -webkit-box;
display: box;
margin-bottom: 7px;
background-color: #f1f0db;
border: 1px solid #6ca237;
.kz_discount {
position: relative;
left: -5px;
top: 6px;
height: 42px;
.kz_discount_pic {
width: 78px;
height: 28px;
padding-left: 10px;
color: #ffe67f;
font-size: 12px;
line-height: 23px;
font-weight: 600;
background: url("./images/discount.png");
background-size: 100% 100%;
}
p {
position: absolute;
left: 12px;
bottom: 0px;
color: #333333;
line-height: 1.2;
font-size: 10px;
}
}
.kz_good_left {
width: vm(240);
img {
width: 100%;
height: auto;
margin-top: vm(20);
padding: 0 vm(10);
box-sizing: border-box;
}
}
.kz_good_right {
-webkit-box-flex: 1;
padding: vm(40) vm(8) vm(40) 0;
h3 {
font-size: vm(26);
color: #333333;
margin-bottom: vm(25);
line-height: 1;
word-wrap: normal;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
h5 {
color: #666666;
font-size: vm(20);
margin-bottom: vm(25);
line-height: 1;
word-wrap: normal;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.advantage {
display: flex;
justify-content: space-around;
width: vm(280);
height: vm(46);
padding: 0 vm(12);
line-height: vm(44);
border: 1px solid #cdb675;
border-radius: vm(46);
}
.info-bottom {
display: flex;
align-items: center;
margin-top: vm(40);
.kz_price {
color: #e94c47;
line-height: 1;
span {
font-size: vm(24);
}
.price_num {
font-size: vm(40);
}
}
.go_buy {
width: vm(140);
height: vm(44);
margin-left: vm(10);
display: block;
text-align: center;
line-height: vm(44);
border-radius: vm(44);
color: #fff;
background-color: #ea4c4d;
}
}
}
}
}
css
* { margin: 0; padding: 0; }
a { text-decoration: none; }
body { background-color: #bcd68f; }
.banner { width: 100%; }
.banner img { width: 100%; }
.kz_goods { padding: 0 6px 10px; }
.kz_goods .kz_goods_item { position: relative; display: -webkit-box; display: box; margin-bottom: 7px; background-color: #f1f0db; border: 1px solid #6ca237; }
.kz_goods .kz_goods_item .kz_discount { position: relative; left: -5px; top: 6px; height: 42px; }
.kz_goods .kz_goods_item .kz_discount .kz_discount_pic { width: 78px; height: 28px; padding-left: 10px; color: #ffe67f; font-size: 12px; line-height: 23px; font-weight: 600; background: url("./images/discount.png"); background-size: 100% 100%; }
.kz_goods .kz_goods_item .kz_discount p { position: absolute; left: 12px; bottom: 0px; color: #333333; line-height: 1.2; font-size: 10px; }
.kz_goods .kz_goods_item .kz_good_left { width: 37.5vw; }
.kz_goods .kz_goods_item .kz_good_left img { width: 100%; height: auto; margin-top: 3.125vw; padding: 0 1.5625vw; box-sizing: border-box; }
.kz_goods .kz_goods_item .kz_good_right { -webkit-box-flex: 1; padding: 6.25vw 1.25vw 6.25vw 0; }
.kz_goods .kz_goods_item .kz_good_right h3 { font-size: 4.0625vw; color: #333333; margin-bottom: 3.90625vw; line-height: 1; word-wrap: normal; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.kz_goods .kz_goods_item .kz_good_right h5 { color: #666666; font-size: 3.125vw; margin-bottom: 3.90625vw; line-height: 1; word-wrap: normal; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.kz_goods .kz_goods_item .kz_good_right .advantage { display: flex; justify-content: space-around; width: 43.75vw; height: 7.1875vw; padding: 0 1.875vw; line-height: 6.875vw; border: 1px solid #cdb675; border-radius: 7.1875vw; }
.kz_goods .kz_goods_item .kz_good_right .info-bottom { display: flex; align-items: center; margin-top: 6.25vw; }
.kz_goods .kz_goods_item .kz_good_right .info-bottom .kz_price { color: #e94c47; line-height: 1; }
.kz_goods .kz_goods_item .kz_good_right .info-bottom .kz_price span { font-size: 3.75vw; }
.kz_goods .kz_goods_item .kz_good_right .info-bottom .kz_price .price_num { font-size: 6.25vw; }
.kz_goods .kz_goods_item .kz_good_right .info-bottom .go_buy { width: 21.875vw; height: 6.875vw; margin-left: 1.5625vw; display: block; text-align: center; line-height: 6.875vw; border-radius: 6.875vw; color: #fff; background-color: #ea4c4d; }
效果展示：