2019独角兽企业重金招聘Python工程师标准>>> 
使用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
Document
-
首月半价
仅限租完即送使用
-
首月半价
仅限租完即送使用
-
首月半价
仅限租完即送使用
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; }
效果展示：