1. 首页
  2. 前端
  3. CSS & HTML

PC端自适应方案(vw+rem)

偶然的一次机会看到了一个网站,觉得他们的自适应方案还可以,就去研究一下了。这里发出来大家参考一下

vw,vh 根据可视窗口调整大小 0 – 100 百分比 1vw就是当前窗口的百分之1

em:根据父级的font-size来确定 比如父级为16px 那么子级用1em = 16px

rem:根据根节点(html)的来确定 比如html为16px 那么下面的所有1rem = 16px

vw + rem解决方案

比如我们的设计稿为1920的设计图,我们将html的font-size设置为16px,兑换过来vw的比例就为 16 / 1920 = 0.008333333很多个3 ,此时就可以将HTML的font-size设置为

html {
    font-size: .83vw
}

下面的计量单位就可以按照 1rem = 16px计算了

比如我们的header在1920的设计图中的高度为80px换算为rem就为 80 /16就为5rem,

当然本方案没要具体考虑到高度问题和移动端方案,还请大家具体根据实际具体编写代码。

写的不对的地方,请大家联系多多指出(QQ:843462167)

原创文章,作者:itclubs,如若转载,请注明出处:https://www.itclubs.cn/?p=160

发表评论

登录后才能评论

联系我们

400-800-8888

在线咨询:点击这里给我发消息

邮件:843462167@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息