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

Posted 2023-05-17

参考技术A

盒模型是由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)

移动端布局适配（px,em,rem,vh,vw)

参考技术A

px就是pixel像素的缩写，相对长度单位，网页设计常用的基本单位。像素px是相对于显示器屏幕分辨率而言的

em是相对长度单位。相对于当前对象内文本的字体尺寸（参考物是父元素的font-size）
如当前父元素的字体尺寸未设置，则相对于浏览器的默认字体尺寸
特点：
　　1. em的值并不是固定的；
　　2. em会继承父级元素的字体大小

rem是CSS3新增的一个相对单位，rem是相对于HTML根元素的字体大小（font-size）来计算的长度单位
如果你没有设置html的字体大小，就会以浏览器默认字体大小，一般是16px

htmlfont-size: 62.5% /* 10 ÷ 16 × 100% = 62.5% */

bodyfont-size: 1.4rem; /* 1.4 × 10px = 14px */

/ 在根元素中定义了一个基本字体大小为62.5%（也就是10px。设置这个值主要方便计算，如果没有设置，将是以“16px”为基准 ） /
优点是，只需要设置根目录的大小就可以把整个页面的成比例的调好
rem兼容性：除了IE8及更早版本外，所有浏览器均已支持rem
em与rem的区别：
　　rem是相对于根元素（html）的字体大小，而em是相对于其父元素的字体大小
两者使用规则：
*
如果这个属性根据它的font-size进行测量，则使用em
*
其他的一切事物属性均使用rem

vw、vh、vmax、vmin这四个单位都是基于视口
vw是相对视口（viewport）的宽度而定的，长度等于视口宽度的1/100
假如浏览器的宽度为200px，那么1vw就等于2px（200px/100）
vh是相对视口（viewport）的高度而定的，长度等于视口高度的1/100
假如浏览器的高度为500px，那么1vh就等于5px（500px/100）
vmin和vmax是相对于视口的高度和宽度两者之间的最小值或最大值

/*
如果浏览器的高为300px、宽为500px，那么1vmin就是3px，1vmax就是5px；如果浏览器的高为800px，宽为1080px，那么1vmin也是8px，1vmax也是10.8px
*/

其他单位：
%（百分比）
一般来说就是相对于父元素
1、对于普通定位元素就是我们理解的父元素
2、对于position: absolute;的元素是相对于已定位的父元素
3、对于position: fixed;的元素是相对于ViewPort（可视窗口）

css3新单位，相对于视口的宽度或高度中较小的那个
其中最小的那个被均分为100单位的vm
比如：浏览器高度900px，宽度1200px，取最小的浏览器高度，1 vm = 900px/100 = 9 px
缺点：兼容性差

1、假如使用em来设置文字大小要注意什么？
注意父元素的字体大小，因为em是根据父元素的大小来设置的。
比如同样是1.5em，要是父元素是20，那1.5em就是30px.要是父元素是30px,1.5em就是45px（特别是在多重div嵌套里面更要注意）
2、pc pt ch一般用在什么场景？
这些我们网页设计基本上用不到，在排版上会有用处
3、如何使 1rem=10px
在设置HTMLfont-size：62.5%；即可
4、如果父元素没有指定高度，那么子元素的百分比的高度是多少？
会按照子元素的实际高度，设置百分比则没有效果