使用vw+rem实现移动端适配

时间 2019-12-06

标签使用 vw+rem rem 实现移动适配栏目无线繁體版

原文原文链接

利用视口单位实现适配布局

响应式布局的实现依靠媒体查询（ Media Queries ）来实现，选取主流设备宽度尺寸做为断点针对性写额外的样式进行适配，但这样作会比较麻烦，只能在选取的几个主流设备尺寸下呈现完美适配。即便使用rem方式来布局，也须要写一段js代码来动态改变根元素的大小。比较成熟的作法如手淘的作法。使用Flexible实现手淘H5页面的终端适配
如今咱们介绍一种全新的适配方式即：利用视口单位来实现适配这样就不用引入多余的js代码css

根据CSS3规范，视口单位主要包括如下4个：
vw : 1vw 等于视口宽度的1%
vh : 1vh 等于视口高度的1%
vmin : 选取 vw 和 vh 中最小的那个
vmax : 选取 vw 和 vh 中最大的那个详细文章可参考再聊移动端页面的适配

作法一：只使用vw作css单位

使用vw做为css单位就涉及到设计师的设计稿如何转化未vw的问题。html

使用sass作为函数编译

//以iphone6的设计稿举例
$base_vw = 375;
@function vw ($px) {
    return ($px/$base_vw) * 100vw
};
复制代码

使用

#app {
        width: 100%;
        .container {
            padding: vw(20) vw(20) vw(20) vw(20)
            .main {
                width 100%
                >h1 {
                    font-size 14px
                }
            }
        }
    }
复制代码

高清屏一个像素解决

.border-1px-bottom {
        position: relative;
        &::after {
            content: '';
            position: absolute;
            z-index: 1;
            background-color: #f8f8f8;
            height: 1px;
            left: 0;
            right: 0;
            top: 0;
            pointer-events: none;
            @media only screen and (-webkit-min-device-pixel-ratio: 2) {
                -webkit-transform: scaleY(0.5);
                -webkit-transform-origin: 50% 0%;
            }
        }
    }
复制代码

对于banner要实现高宽比的图须要使用padding-tophtml5

.banner {
    position: relative;
    padding-top: percentage(100/750); // 使用padding-top
    height: 0;
    overflow: hidden;
    img {
        width: 100%;
        height: auto;
        position: absolute;
        left: 0;
        top: 0; 
    }
}
复制代码

作法二：使用vw+rem作css单位

虽然vw能更优雅的适配，可是仍是有点小问题，就是宽，高无法限制。那么结合rem就能够完美解决啦。web

// 设置html根元素的大小 750px->75 640px->64
// 将屏幕分红10份，每份做为根元素的大小。
$vw_fontsize: 75
@function rem($px) {
    // 例如：一个div的宽度为100px，那么它对应的rem单位就是（100/根元素的大小）* 1rem
    @return ($px / $vw_fontsize) * 1rem;
}
$base_design: 750
html {
    // rem与vw相关联
    font-size: ($vw_fontsize / ($base_design / 2)) * 100vw;
    // 同时，经过Media Queries 限制根元素最大最小值
    @media screen and (max-width: 320px) {
        font-size: 64px;
    }
    @media screen and (min-width: 540px) {
        font-size: 108px;
    }
}

// body 也增长最大最小宽度限制，避免默认100%宽度的 block 元素跟随 body 而过大太小
body {
    max-width: 540px;
    min-width: 320px;
}

复制代码

使用

#app {
            width: 100%;
            .container {
                padding: rem(20) rem(20) rem(20) rem(20)
                .main {
                    width 100%
                    >h1 {
                        font-size 14px
                    }
                }
            }
        }
复制代码

参考凹凸实验室sass

利用视口单位实现适配布局