CSS3移动端vw+rem不依赖JS实现响应式布局

1、前言 (1)vw/vh介绍

在使用之前,我们先简单了解一下什么是vw和rem以及它们的作用,vw是css3出现的一个新单位,它是“view width”缩写,定义为把当前屏幕分成一百份,1vw即为屏幕的1%,与之对应的是vh,把高分成一百份,1vh即为屏幕高的1%,一般我们常用的vw单位来完成响应式开发

(2)rem介绍

rem是相对长度单位。相对于根元素(即html元素)font-size计算值的倍数,比如你html设置的字体为20px,那么页面中的1rem就相当于20px,举个例子:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> html,h1 { font-size: 12px; } p { font-size: 2rem; } </style> </head> <body> <h1>我是h1中的文字</h1> <p>我是p标签中的文字,是h1文字的两倍</p> </body> </html> 2、正文

(1)有了上面对这两个单位的了解,我们就可以通过换算来完成移动端的响应式布局处理,这里我们用iPhone6/7/8的手机为例,屏幕宽度为375px。

1vw = 3.75px

(2)好,现在我们想象下100px等于多少vw呢?这里需要计算一下。

100px = 26.6666666vw //因为是无限循环,这里取7位小数

(3)那么怎么把rem和vw联系起来呢?这里我们来写一个小案例:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title></title> <link href=""> <style type="text/css" media="screen"> html{ font-size: 26.6666666vw } p{ font-size: 0.2rem; width: 2rem; height: 1rem; background: pink; margin: 0 auto; line-height: 1rem; text-align: center; } </style> </head> <body> <P>我是P标签中的文字</P> </body> </html>

上面的案例我们把html中的font-size设置为26.6666666vw,这代表着font-size=100px,然后结合rem的特性就实现了前端css响应式布局

总结:前端响应式布局有很多种,pc端的响应式框架也有很多,移动端的很多框架也自带响应式,这种方法我觉得也是比较好用的方法,html中的font-size大家可以随意设置,只是换算过来很麻烦,于是很多方法也就产生了,很多编辑器有自动换算的功能,比如我用的sublime编辑器,网上也有很多在线的网页在线转化,好了,以上就是我的使用心得,如有错误之处,请大家多多指正!

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zywwww.html