css中的几个单位——rem、viewportunit和ch
时间：2023-03-31 12:12:26
CSS
remrem是设计响应式网页的神器，因为rem单位是相对于HTML元素的font-size属性的，所以当使用rem作为属性单位时，改变一个HTML元素的字体大小，其他以rem为单位的元素也会适应这个大小。那么如何根据屏幕的大小制作响应式网页呢。使用css媒体查询使用相当于视口宽度单位的vw值（下一部分）。先来说说使用cssmediaquery。如下所示，屏幕查询可以指定屏幕尺寸。当屏幕是你指定的尺寸时，它会运行里面的代码，但是这种方法有一个缺点---它无法控制更精确的尺寸，所以我们可以使用vm来解决这个问题。rem
vw,vh,vmin,vmaxViewport-basedunitsViewportunits可以用什么，例如：实现响应式设置相对于宽高viewport，实现水平和垂直居中，实现网格布局，按照屏幕比例显示图片，这些单位是相对于viewport，即可见区域，一共分为100份。如果要在指定区间内改变字体大小，比如当可见区域大小为980px-320px时，让字体大小在14-20之间变化，可以14-(20-14)*(980-320)/(980-320)
rem 除了使用这些基于视口的单元来实现响应之外，您还可以做一些其他的事情。我们知道，如果一个值可以被继承，百分比是指父元素计算出的值。当没有设置父元素的高度时，根据子元素的高度来确定。所以，如果不直接设置宽高，100%的设置是没有效果的。如果使用视口单位，就不会出现这种情况，因为它是相对于屏幕的可见区域而言的。盒子{宽度：100vw;高度：100vh；background-color:pink;}如果要实现水平垂直居中
