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

最新推荐文章于 2024-07-21 23:36:55 发布

weixin_33878457

最新推荐文章于 2024-07-21 23:36:55 发布

阅读量222

点赞数

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5bbecb90f265da0ac13938cd

本文介绍了一种使用视口单位（vw、vh、vmin、vmax）实现响应式网页布局的方法，无需额外JS代码，适用于多种设备尺寸。讨论了两种实现方案：仅使用vw和结合vw与rem单位，提供了具体的Sass函数示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

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

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

使用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-top

.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就可以完美解决啦。

// 设置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
                    }
                }
            }
        }
复制代码

参考凹凸实验室