移动端布局vw和vh、em与rem

2023-03-04 07:33:01html-css031

移动端布局vw和vh、em与rem,第1张

盒模型是由padding、margin、width、height 这几个属性构成的。一个元素在网页中占据的真正空间大小就是盒模型的大小，而非简单的宽高值。

padding 和 margin 在设置百分比时，纵向的值并不是按照父级的 height 来计算的 ，而是按照宽度。

margin 四个方向的百分比均是按照父元素的宽度（640px）进行计算的，也就是说，每个p标签的宽度为 116px（18%），高度就是220px（83%），如此计算，一个p元素盒模型的大小为 128px*308px。

CSS 的基本模型着重于排版的需求，因此水平和垂直方向上的排版并不是同等权重的。当文字排列方向为横向排列时，就采用水平方向上的排版模式。排版默认是水平宽度一定，垂直方向上可以无限延展。当文字排列方向为纵向时，就采用垂直方向上的排版模式，也就是高度一定，水平方向上无限拓展。

使用百分比设置内外边距时，文字书写方向就决定了 margin、padding 是按照 height 还是 width 来计算。

宽度和高度，设置百分比时，就是按照对应父盒子的宽高（不是总宽总高，换句话说，不包含内外边距）来计算的。

行高设置百分比时，是针对当前元素的字体尺寸来进行计算的。比如，当前元素默认字体大小为 16px，那设置行高 line-height: 100% ，也就是 line-height: 16px ，也等同于 line-height: 1 。

vw、vh、em、rem，这些单位都是在CSS3中新增的相对度量单位。但是在移动端开发中，应该选取哪个单位作为主力开发？

em ：em 是相对于当前对象内文本的字体大小进行设置的。如果当前对象内文本字体尺寸为被 人为设置 ，则相对于人为设置的值。换句话说，如果当前div字体大小为12px，那 1em=12px。由于每一级都需要进行单独的计算，所以很不适合用来做移动端的相对度量单位；

rem ：这个单位，在刚出来不久，就让每个开发人员都眼前一亮。虽然 rem 也是和字体相关的相对度量单位，但是，它比em更加简单方便。首先，rem 是按照根元素字体的大小进行设置的，所以只要在根元素设置字体大小，不管在哪一个元素使用rem，都是不会受到其他影响的。

有了 rem 这个特性，它就能与 JS 配合，很好地解决了移动端的各种像素大小问题。首先通过JS获取设备宽度，然后根据设备宽度来调整HTML这个元素的文字大小。

由于新增的初期，vw 的兼容性是非常不容乐观的，各大主流浏览器都阵亡的前提下，rem + JS 独占了移动端端一个主流布局方式。

vw、vh 是针对移动设备，如果视窗的大小发生改变，这两个值也会跟着发生相应的变化。所以在使用情况上来看，vw 比 rem 更加的智能。由于现在的主流浏览器对vw的兼容性是非常成熟的，所以现在移动端布局主要考虑 vw。

开设设计稿的宽度是 350px，设计稿中一个盒子的大小为 100px * 100px，那如果想将100px转换成vw单位，首先要知道在设计稿中，1vw 代表的像素是多少，比如这里设计稿是350px，那1vw = 350 / 100 = 3.5px，那盒子大小为100px，换算成vw就是 100 / 3.5 = 28.57vw。

具体换算可以按照下面的公式

750px下测量的宽度 / 750 * 100)

css移动端的兼容性问题（适配问题）

一、浮动问题

简述：

我们在平时切页面时,经常会出现用完浮动(float),忘记删除.下面的布局出现莫名其妙的空白高度,导致布局调整失败

避免使用浮动

二、

链接: http://blog.csdn.net/chenmoquan/article/details/41547609

1、水平居中—使用 text-align

2、margin: auto 居中

3、table-cell 居中