一行css代码轻松实现前端响应式布局（vw+rem）

piapia 发布于2019-08-30 15:54 / 608人阅读

摘要：大家知道可以用来做响应式布局，只是元素上的样式需要根据屏幕宽度来指定。今天突然想到这个单位，发现用它来做响应式布局实在太方便了。只需一行屏幕标准宽，全部宽度是，即也就是每像素。这个值也可根据自己需要调整数值。具体实现的完整代码请参考

大家知道rem可以用来做响应式布局，只是html元素上的font-size样式需要根据屏幕宽度来指定。

之前有用@media媒体查询，根据各种屏幕宽度写html的样式，也用过类似lib-flexible这样的js库动态改变html样式，总觉得挺麻烦的。

今天突然想到vw这个单位，发现用它来做响应式布局实在太方便了。

只需一行css：

html {  font-size: 26.66667vw !important; }

屏幕标准宽375px，全部宽度是100vw，即：

100vw / 375px = 0.2666667 vw/px

也就是每像素0.2666667vw。为调试时便于换算，我们设定1rem = 100px, 即 1rem = 26.66667vw。这个值也可根据自己需要调整数值。

然后，我们在样式中，就可以直接用rem了，做出来就是响应式布局。

当然如果你还想再方便点，也可以在css代码里直接用px做单位，然后使用postcss-pxtorem这个工具在webpack构建时将px转为rem单位。这样写代码时照着UI图的标注直接写像素值就行了。配置如下：

    {
        loader: "postcss-loader",
        options: {
            plugins: [
                require("postcss-pxtorem")({rootValue: 100, propList: ["*"]})
            ]
        }
    }

这个 rootValue: 100值，就是对应上面的换算关系。如果你要调整的话，这里要一并调整。

具体实现的完整代码请参考：https://github.com/hzsrc/vue-...

云服务器 GPU云服务器 rem响应式响应式布局 asp如何响应式布局 html响应式导布局

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117031.html

Web移动端页面 --响应式和动态REM

摘要：当媒介最大宽度为且是横屏时里面的样式生效目前前端开发项目类型可以分为两种方式，和。这样我们的响应式网页才完全生效了。移动端特点移动端特点没有有没有滚动条没有没有因为移动端是没有事件的所以当我们在需要兼容移动端的页面中应该尽量少用事件。鄙人最近才刚刚开始学习一些关于移动端的知识，还只是个小白，文中可能有许多理解错误，望指出，请多多见谅。响应式什么是响应式页面呢？顾名思义响应式页面就是能做...

BLUE 2019-04-23 13:44 评论0 收藏0
【技术】移动端适配 px2rem/px2vw 的原理与实现

摘要：不同的前端框架，配合等打包工具，可以更高效的使用这些插件，完成移动端适配的配置工作。简介【目标】：前端开发移动端及H5时候，不需要再关心移动设备的大小，只需要按照固定设计稿的px值布局！【基础】 dpr（设备像素比）css的像素px不等于设备像素/分辨率/各种值，css的px可以简单理解为虚拟像素，与设备无关，css的px需要乘dpr计算为设备像素； css3 的 rem，即ro...

AlexTuan 2019-08-22 18:41 评论0 收藏0
前端—初级阶段3(9-12)

摘要：屏幕可见的最大宽度高度。相对于当前对象内文本的字体尺寸。特点值并不固定会继承父级元素的字体大小。所有未经调整的浏览器都符合。相对于父元素相对于根元素视窗宽度。可视区高度的和中较小的那个。一般情况之下，像素称为与设备无关的像素，简称。内容 1.Iconfont 字体图标(阿里巴巴矢量字体图标库)原理以及实现 2.Media媒体响应式布局 3.Flex弹性盒子布局 4.移动端适配原理 r...

rottengeek 2019-08-30 15:56 评论0 收藏0