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 name="viewport" 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 rel="stylesheet" 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编辑器，网上也有很多在线的网页在线转化，好了，以上就是我的使用心得，如有错误之处，请大家多多指正！

1、前言

（1）vw/vh介绍

（2）rem介绍

2、正文