CSS3中如何同时使用VW和VH作为单位?

html-css026

CSS3中如何同时使用VW和VH作为单位?,第1张

不行的,建议使用rem然后通过js改变html标签的font-size实现

例如rem设计稿像你一样用100,那就font-size: 5rem然后window添加事件监控设置window的最大宽度/100就是html标签的font大小

代码:

window.onresize = function () {

x = 100

document.documentElement.style.fontSize = (document.documentElement.clientWidth / x + document.documentElement.clientHeight / x)/2 + "px"}

并且其实没有必要的,就用width宽度即可,高度不用管的

【CSS】

vmin

视口高度和宽度之间的最小值的 1/100。

vmax

视口高度和宽度之间的最大值的 1/100。

使用CSS的vmin(兼容性一般般)可以是:

【p {

font-size: 8vm

font-size: 8vmin

}】

如果视口的宽度是300mm,高度是200mm,那么上述代码中h1元素的字号将为16mm,即(8x200(最小的))/100,因为高度比宽度要小,所以计算的时候相对于高度。

使用CSS的vmin(兼容性超级一般般,IE11都不支持)可以是:

【p { font-size: 8vmax}】

如果视口的宽度是300mm,高度是200mm,那么上述代码中h1元素的字号将为24mm,即(8x300(最小的))/100,因为高度比宽度要小,所以计算的时候相对于宽度。

参考资料:MOZ网页链接

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