不行的,建议使用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网页链接
rem:移动端布局,根据根节点字体大小,具体可参考淘宝移动端解决法案,根据设备dpr;em:类似rem,不过是根据父节点字体大小
vw,vh :viewport height和viewport width。1vw就是viewport width的1%。