hello,欢迎来到腾云源码!

收集源码:5764套

收集模板:4317套

资讯合计:9条

工具软件:563条

腾云源码实验
腾云源码实验
PHP源码 ASP源码 .NET源码 JSP源码 HTML源码 企业网站源码 电影网站源码 导航网站源码
帝国模板 织梦模板 企业模板 商务模板 博客模板 商城模板 餐饮模板 学校模板 整站模板 HTML5模板
网页制作 图像动画 编程工具 远程登录 浏览器 手机应用 下载上传 阅读器 输入法 数据库

当前位置:

首页 > 源码教程   >  

自适应网站布局为什么要抛弃rem改用vw?

自适应网站布局为什么要抛弃rem改用vw?

2020-07-15 16:25:07

人读过

自适应网站布局为什么要抛弃rem改用vw?

腾云极客官方

腾云极客官方

作者
导读:你还在用rem弹性布局吗?在html文件头部放入一大段压缩过的js代码,是不是让你很难受?来了解下vw吧,能让你的代码更纯粹。

  你还在用rem弹性布局吗?在html文件头部放入一大段压缩过的js代码,是不是让你很难受?来了解下vw吧,能让你的代码更纯粹。

  简单介绍Frem布局方案

  rem是ss中的长度单位,lrem根元素htmligfont size值。当页面中所有元素都使用rem单位时 ,你只需要改变根元素font size值,所有元素就会按比例放大或者缩小,因此我们只需要写-小段i代码,根据屏嘉宽度改变htmlefont size值,就可以做到弹性布局。这种方法确实便捷,兼容性也很好.是目前非常主流的强弹性布局方室。但这种方案有弊端(弊端之一: 和根元素font. sie值强耦合,系统字体放大或缩小时.会导致布局错乱:弊端之三: html文件头部需插入一段js代码 ), 本文将介绍-种更优秀纯粹的方案。

布局

  vw单位实现弹性布局

  我们先来看看这ww vh单位w3c的官方解释

  vw: 1% of viewport' s widthvh: 1% of viewport' s height

  viewport即浏览器可视区域大小

  我们可以这样理解100w = window inewith 100 = window inerheight

  设相以以10w就是屏幕宽度。若使用vw布局.就不需要再像rem那样,在j中去动态

  size了,sass中只需要使用这个函数做转换即可

  总结

  目前ios8、安卓4.4以下的用户已经非常少了,caniuse.上面显示,在中国这部分用户只有1.2%,比例已经非常低了,而这部分用户的手机估计只会打打电话不会使用互联网的(还是需根据各自产品的用户数据分析来决定是否使用ww)。如果你的页面只适用于微信、qq ,那绝对能放心使用vw单位,还可以配台vh针对一些特殊比例屏暮做处理,彻底摆脱使用rem带来的副作用,删掉htm|头部计算font-size的那段js代码,让你的代码更纯粹。

  以上就是小编为大家带来的自适应网站布局为什么要抛弃rem改用vw,希望可以帮助到大家哦!

本内容为作者独立观点和互联网收集,不代表腾云立场。

未经允许不得转载,如有侵权请联系腾云客服。

点击电池给文章充电,让更多人看到
自适应网站布局为什么要抛弃rem改用vw?
关于我们 关于我们 腾云源码 腾云源码 XML地图 XML地图 TXT地图 TXT地图 全部标签 全部标签

全部内容均为小编辛苦原创或来源于互联网,如您发现本站内容有侵犯原作者权益的行为,请联系客服!

Copyright©2018.Company All rights reserved. 备案号备案号:冀ICP备180348574号-4