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

2018-12-08 admin

大家知道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-…

原文链接:https://segmentfault.com/a/1190000017308202

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-47643.html

文章标题:一行css代码轻松实现前端响应式布局(vw+rem)

相关文章
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...
2017-03-13
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
破解前端面试(80% 应聘者不及格系列):从 闭包说起
不起眼的开始 招聘前端工程师,尤其是中高级前端工程师,扎实的 JS 基础绝对是必要条件,基础不扎实的工程师在面对前端开发中的各种问题时大概率会束手无策。在考察候选人 JS 基础的时候,我经常会提供下面这段代码,然后让候选人分析它实际运行的结...
2017-06-02
three.js实现围绕某物体旋转
话不多说,请看代码: 可以拖动右上角观察变化 <!DOCTYPE html> <html lang="en" style="width: 100%; height:100%;"&gt...
2017-02-17
前端交流QQ群
我们建立了一个前端交流QQ群供大家交流,有什么问题都可以在群里提问,欢迎你的加入,也希望我们大家能够在群里互帮互助,同时也能学到东西。 我们相信,前端有你更精彩! 为了让更多的小伙伴加入我们,欢迎大家转发扩散! 长按以上二维码加入我们 ...
2016-04-01
2014年最流行前端开发框架对比评测
如今,各种开发框架层出不穷,各有千秋。哪些是去年较受开发者关注的呢?前不久,云适配根据Github上的流行程度整理了2014年最受欢迎的6个前端开发框架,并进行对比说明,希望帮助有需要的朋友选择合适自己的前端框架。 1. Bootstrap...
2015-11-12
必须记住的 30 类 CSS 选择器
开篇 有 30 个 CSS 选择器你必须烂熟于心,它们适应于当今各大主流浏览器。 1.* * { margin: 0; padding: 0; } *选择器选择的是每一个单一元素。很多程序员用上面的 CSS 将所有元素的 ma...
2015-11-16
CSS2.0帮助文档(参考手册)chm下载
下载地址:CSS2.0帮助文档(参考手册)chm下载 友情提示:如果打开空白,在手册上右键属性解除锁定即可。 ...
2015-11-12
可以从CSS框架中借鉴到什么
现在很多人会使用 CSS 框架进行快速建站。   那 CSS 框架是什么呢,它通常是一些 CSS 文件的集合,这些文件包括基本布局、表单样式、网格、简单组件、以及样式重置。使用 CSS 框架大大降低工作成本进行快速建站。   当然对于一些大...
2016-03-11
JavaScript短路原理精简代码
js中||和&&的特性帮我们精简了代码的同时,也带来了代码可读性的降低,虽然高效,但请灵活使用。 在js逻辑运算中,0、""、null、false、undefined、NaN都会判为false,其他都为t...
2015-11-12
回到顶部