使用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
  • 首月半价

    仅限租完即送使用

     

     

     

    联想拯救者R720 15.6寸游戏本

    I7-7700HQ/8G/1T+128G SSD/独显2G

    霸7来袭

    10力全开

    ¥329/月

    立即抢购

  • 首月半价

    仅限租完即送使用

     

     

     

    联想拯救者R720 15.6寸游戏本

    i5/8G内存/128G SSD/集显

    霸7来袭

    10力全开

    ¥329/月

    立即抢购

  • 首月半价

    仅限租完即送使用

     

     

     

    联想拯救者R720 15.6寸游戏本

    i5/8G内存/128G SSD/集显

    霸7来袭

    10力全开

    ¥329/月

    立即抢购

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; }