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编辑器，网上也有许多在线的页面在线转化，好了，以上就是我的使埋头得，如有错误之处，请大家多多指正！
3、其他相应式布局介绍
（1）流式布局
流式布局即百分比布局，例如，设置页面主体的宽度为80%，min-width为960px。图片也作类似处理（width:100%, max-width一样平常设定为图片自己的尺寸，防止被拉伸而失真）。
布局特点：屏幕分辨率转变时，网页里元素的大小会转变而但布局不变。【这就导致假如屏幕太大或者太小都会导致元素无法正常表现】
设计方法：使用%百分比定义宽度，高度大都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。每每配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。
这种布局体例在Web前端开发的早期历史上，用来应对不同尺寸的PC屏幕（那时屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局体例，但瑕玷显明：重要的题目是假如屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常表现。由于宽度使用%百分比定义，但是高度和笔墨大小等大都是用px来固定，所以在大屏幕的手机下表现结果会变成有些网页元素宽度被拉的很长，但是高度、笔墨大小照旧和原来一样（即，这些东西无法变得“流式”），表现特别很是不和谐。
（2）媒体查询
媒体查询是监听当前屏幕的宽度来相应你对应的设置，比如375px的屏幕字体为12px，960的屏幕字体为18px，对于简单的网页来说写起来很重大，但是对于大型项目来说照旧很方便的，媒体查询有个特点就是比如你从375px屏幕缩放到960px屏的时候字体或者图片会忽然放大，也算是一种不好的体验吧，但是现实运用中并没有什么关系。
布局特点：每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。
设计方法：媒体查询+流式布局。
总结：
1.假如只做pc端，那么流式布局（定宽度）是最好的选择；
2.假如做移动端，且设计对高度和元素间距要求不高，那么弹性布局（vw）是最好的选择，一份css调节font-size搞定；
3.假如pc，移动要兼容，而且要求很高那么媒体查询照旧最好的选择，前提是设计根据不同的高宽做不同的设计，相应式根据媒体查询做不同的布局。
以上就是本文的悉数内容，盼望对大家的学习有所帮助，也盼望大家多多支持图趣网。
本文地址：http://www.tuquu.com/tutorial/wd503.html
