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

大家知道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值，就是对应上面的换算关系。如果你要调整的话，这里要一并调整。

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

CSS实现固定宽高比响应式布局（附实例分析）
更多文章可关注我的个人博客:https://seven777777.github.io/myblog/ 在日常开发过程中,有一些前端业务场景可能需要让元素在尺寸变化的同时,保证宽高比不变,所以在此记录 ...
[css] 你是如何规划响应式布局的？
[css] 你是如何规划响应式布局的? 从项目角度来讲, PC 和 Mobile 是一个项目还是两个项目:从方法流派来讲, 有栅栏布局,固定 viewport,使用 rem/pt/vw 单位,使用定位 ...
html vw布局,完美的响应式布局vw+vh+rem屏幕适配方案！
一.前言根据前面写的你不知道的css单位,进行了一种响应式布局的思考. 视口布局的优点:宽度和高度全部自动适应!再加上rem布局的字体适应,可以完美解决各种屏幕适配问题! 单位可参考 : 你不知道 ...
css+全屏视频背景+响应式布局
记录自己做网页的过程,便于以后忘记回来学习. 视频背景用一个视频作为网页的背景,视频大小会随窗口大小变化(响应式布局) html代码: <div class="bg-video&qu ...
前端学习第16天：媒体查询-响应式布局
第16天 1.媒体查询说明:媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒 ...
前端开发响应式布局和移动端布局有哪些特点和区别？
同学们在进行前端开发的时候经常会运用到响应式布局,在进行移动端页面开发的时候还会使用到移动端布局的知识,那么你知道他们都有哪些优缺点和相同之处吗?下面小千就来给大家列举一下. 响应式布局响应式布局是 ...
在html中写响应式布局的代码,手机端自适应响应式框架，移动端响应式布局代码...
移动端自适应框架,响应式布局,如何实现移动端不同分辨率的手机?在本文能够详解,响应式布局是HTML5和css的结合是必然,但是很多朋友不知道怎么实现不同分辨率下的手机端,自适应框架在本站也有,但是具体 ...
南京html5响应式网站,HTML5响应式布局的设计方法和响应式前端优化
作为一名优秀的web前端人员,不懂响应式布局怎么可以呢? 今天跟大家分享web前端开发和设计的干货:关于响应式布局的设计方法和响应式前端优化. 我们都知道,目前主流的pc屏幕的分辨率都是1366*76 ...
怎么在服务器端做响应式布局,关于响应式布局的设计方法和响应式前端优化
原标题:关于响应式布局的设计方法和响应式前端优化作为一名优秀的web前端人员,不懂响应式布局怎么可以呢? 今天跟大家分享web前端开发和设计的干货.关于响应式布局的设计方法和响应式前端优化. 我们都 ...

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

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

最新文章

热门文章