1. 当盒模型等属性遇到百分比
1.1 margin 和 padding 使用百分比做单位
盒模型是由padding、margin、width、height 这几个属性构成的。一个元素在网页中占据的真正空间大小就是盒模型的大小，而非简单的宽高值。
padding 和 margin 在设置百分比时，纵向的值并不是按照父级的 height 来计算的，而是按照宽度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrap {
width: 640px;
height: 240px;
border: 1px solid #000;
}
.wrap p {
float: left;
background-color: pink;
/* 实际显示的效果 */
width: 18%;
height: 83%;
margin: 8.5% 1%;
/* 期望显示的效果 */
width: 116px;
height: 200px;
margin: 20px 6px;
}
</style>
</head>
<body>
<div class="wrap">
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</body>
</html>
margin 四个方向的百分比均是按照父元素的宽度（640px）进行计算的，也就是说，每个p标签的宽度为 116px（18%），高度就是220px（83%），如此计算，一个p元素盒模型的大小为 128px*308px。
1.1.1 CSS 排版原理
CSS 的基本模型着重于排版的需求，因此水平和垂直方向上的排版并不是同等权重的。当文字排列方向为横向排列时，就采用水平方向上的排版模式。排版默认是水平宽度一定，垂直方向上可以无限延展。当文字排列方向为纵向时，就采用垂直方向上的排版模式，也就是高度一定，水平方向上无限拓展。
使用百分比设置内外边距时，文字书写方向就决定了 margin、padding 是按照 height 还是 width 来计算。
1.2 width、height
宽度和高度，设置百分比时，就是按照对应父盒子的宽高（不是总宽总高，换句话说，不包含内外边距）来计算的。
1.3 border 使用百分比作为单位
- 当使用简写属性时，如果边框宽度使用了百分比，则会导致整个声明块都会失效；
- 当使用分写属性时，虽然边框宽度使用百分比会导致宽度声明块失效，但是其他属性并不会失效，再加上浏览器默认的边框宽度值是 3px，所以分写时仍然会显示边框。
1.4 line-height 使用百分比作为单位
行高设置百分比时，是针对当前元素的字体尺寸来进行计算的。比如，当前元素默认字体大小为 16px，那设置行高 line-height: 100% ，也就是 line-height: 16px; ，也等同于 line-height: 1。
2. CSS3 新增的度量单位
vw、vh、em、rem，这些单位都是在CSS3中新增的相对度量单位。但是在移动端开发中，应该选取哪个单位作为主力开发？
2.1 em 与 rem
em：em 是相对于当前对象内文本的字体大小进行设置的。如果当前对象内文本字体尺寸为被人为设置，则相对于人为设置的值。换句话说，如果当前div字体大小为12px，那 1em=12px。由于每一级都需要进行单独的计算，所以很不适合用来做移动端的相对度量单位；
rem：这个单位，在刚出来不久，就让每个开发人员都眼前一亮。虽然 rem 也是和字体相关的相对度量单位，但是，它比em更加简单方便。首先，rem 是按照根元素字体的大小进行设置的，所以只要在根元素设置字体大小，不管在哪一个元素使用rem，都是不会受到其他影响的。
有了 rem 这个特性，它就能与 JS 配合，很好地解决了移动端的各种像素大小问题。首先通过JS获取设备宽度，然后根据设备宽度来调整HTML这个元素的文字大小。
由于新增的初期，vw 的兼容性是非常不容乐观的，各大主流浏览器都阵亡的前提下，rem + JS 独占了移动端端一个主流布局方式。
2.2 vw 和 vh
vw、vh 是针对移动设备，如果视窗的大小发生改变，这两个值也会跟着发生相应的变化。所以在使用情况上来看，vw 比 rem 更加的智能。由于现在的主流浏览器对vw的兼容性是非常成熟的，所以现在移动端布局主要考虑 vw。
3. 设计稿尺寸的还原
3.1 将设计稿中的宽度换算成 vw
开设设计稿的宽度是 350px，设计稿中一个盒子的大小为 100px * 100px，那如果想将100px转换成vw单位，首先要知道在设计稿中，1vw 代表的像素是多少，比如这里设计稿是350px，那1vw = 350 / 100 = 3.5px，那盒子大小为100px，换算成vw就是 100 / 3.5 = 28.57vw。
3.2 设计稿的尺寸问题
具体换算可以按照下面的公式
750px下测量的宽度 / 750 * 100)
网友评论