纯CSS使用vw和vh视口单元实现自适应代码

terry 2年前 (2023-09-27) 阅读数 64 #数据结构与算法

移动端使用rem进行与HTML根相关的更改。一段时间后，JS安装了移动终端。这个文则使用纯CSS视图元素。自适应，即使目前兼容性还不能完全接受，也不妨碍你了解大众和vh的强大。

响应模式的应用取决于媒体的请求（媒体查询）。选择默认设备宽度作为断点并编写额外的对齐方法。然而，这会比较困难，只能通过选定的几个项目来完成。非常适合标准设备尺寸。

虽然使用 rem 元素进行对齐，但需要包含脚本来计算主元素的大小。

在过去几年中，随着移动端口视图组件的支持已经成熟并变得更加广泛，我们可以尝试新的方法来适应所有设备尺寸。

理解视口元素

首先，我们需要了解什么是视口。

业界最推崇的理论是Peter-Paul Koch（被誉为“PPK大神”）提出的端口解释——在桌面上，视口是指桌面浏览器的可见区域;在移动端，情况更加复杂。它包含三个端口，分别是： Layout Viewport（布局视口） 、Visual Viewport（视觉视口） 、、Visual Viewport（视觉视口） , ♶视口单位，在桌面上，毫无疑问是指浏览器的视口区域；但在移动端它指的是三个视口布局视口之一。

根据 CSS，视口组由以下 4 个元素组成：

vw：1vw 等于视口宽度的 1%
vh：1 vh 等于端口高度的 1%。
vmin：选择 vw 和 vh 中最小的
vmax：选择 vw 和 vh 之间最大的

视口单位与 % 元素不同，视口单位是 取决于大小。按端口 ，按端口定义为尺寸的百分比； % 元素取决于该元素的祖先元素。

在视口组中测量，端口宽度为100vw，高度为100 vh（左侧为纵向屏幕条件，右侧为横向条件）

例如桌面屏幕尺寸。浏览器是650px，那么1vw = 650 * 1% = 6.5px（这是理论计算，如果浏览器无法处理0.5px，那么实际渲染结果可能是7px）。

兼容性

兼容性如下图所示。可以知道移动端ios8及以上、Android 4.4及以上均支持，微信内核x5中全面支持

来自我可以使用的截图

使用视口单元适配页面

对于移动终端的开发来说，最重要的一点就是如何对页面进行适配，实现对多种终端的兼容。不同的适应方法有其优点和缺点。。

当涉及到自定义响应式布局和灵活布局时，通过媒体查询设置的布局需要配置多个响应断点，由此产生的用户体验也非常不愉快。：响应断点布局不会以相同的速率变化，但是当断点切换点响应时，布局会不断变化，就像磁带播放器一遍又一遍地“点击”一样。

利用rem元素弹性的动态计算，需要在header中包含一个脚本来跟踪分辨率变化并动态改变主元素中的fonts大小，将CSS和js链接在一起。

有办法解决这个问题吗？

答案是肯定的。通过使用viewport元素来实现配置的页面，是能够解决响应错误的问题，解决脚本引起的问题。

方法一：直接使用vw作为css元素

在使用vw作为单个元素作为单个CSS元素的实现下，按照：

将轮廓大小更改为vw元素，使用Sass函数编译

// iPhone 6 尺寸作为设计稿基准
$vw_base: 375px;
@function vw($px) {
    @return ($px / $vw_base) * 100vw;
}
复制代码

无论是文字还是布局宽度、间距等，vw都是作为物理CSS线

.mod_nav {
    background-color: #fff;
    &_list {
        display: flex;
        padding: vw(15) vw(10) vw(10); // 内间距
        &_item {
            flex: 1;
            text-align: center;
            font-size: vw(10); // 字体大小
            &_logo {
                display: block;
                margin: 0 auto;
                width: vw(40); // 宽度
                height: vw(40); //高度
                img {
                    display: block;
                    margin: 0 auto;
                    max-width: 100%;
                }
            }
            &_name {
                margin-top: vm(2);
            }
        }
    }
}
复制代码

1px（即普通屏幕上1px，屏幕高清上0.5px）使用可变属性参数来实现。

.mod_grid {
    position: relative;
    &::after {
        // 实现1px的下边框线
        content: '';
        position: absolute;
        z-index: 1;
        pointer-events: none;
        background-color: #ddd;
        height: 1px;
        left: 0;
        right: 0;
        top: 0;
        @media only screen and ()
    }
}
复制代码

对于需要保持宽高比的图片，应该使用padding-top

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

这样我们就可以实现正常布局的页面效果如下：

体验地址点击这里

方法2：使用vw和rem，软件的布局效果更好

即使这样的页面看起来很合适，你会发现，因为它使用视口的元素来应用布局，所以它会根据取决于视口的大小，无论视口的大小如何。无论是太大还是太小，最大和最小宽度限制也会因为端口太大或太小而丢失。

当然，您不必担心这样不友好的用户体验，但我们仍在努力修复这样的小错误。

所以，我觉得结合rem元素来完成设计会更好吗？ rem柔性布局的本质是动态改变主要元素的大小。然后我们可以通过：

将vw元素设置为随端口变化而变化的主元素的大小，这样就可以动态改变大小了。
设置主元素的最大和最小字体大小，并将最大宽度和最小宽度添加到正文中

这样就可以实现设计宽度的上下限。因此，根据以上条件，我们可以得出代码的实现如下：

// rem 单位换算： 定位75px 只是方便运算， 750-75px、 640-64px、 1080-108px， 如此类推
$vw_fontsize: 75; // iPhone6 尺寸的根元素大于基准值
@function rem($px) {
    @return ($px / $vm_fontsize) * 1rem;
}
// 根元素大小使用vw单位
html {
    font-size: ($vm_fontsize / ($vm_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;
}
复制代码

这里就不提供截图了，但是大家可以点击这里查看-在线的地址。

总结

相比第一种方法，我特别喜欢第二种方法，原因有二：

第一，第二种方法用户体验更好，增加了上限和最低；

其次，也是最重要的一点，如果选择标准的灵活rem布局作为项目开发的布局页面，那么第二种方法更适合项目后期从rem单元迁移到vw单元。通过改变计算主元素大小的方法，你可以将其无缝地转移到其他CSS元素上，而无需进一步处理，更不用说vw元素的使用必须成为更好的匹配方法。目前由于兼容性支持，它没有被广泛使用。

作者：zhengdongzhe
链接：https://juejin.im/post/5d774cecf265da03c23efdb5
来源：作者掘金
。如需商业印刷，请联系作者以获得许可。非商业转载请注明来源。