关闭

rem布局和vw布局的理解

时间: 2018-12-04阅读: 2661标签: 布局

什么是rem单位?

rem是一个灵活的、可扩展的单位,由浏览器转化像素并显示。与em单位不同,rem单位无论嵌套层级如何,都只相对于浏览器的根元素(html元素)的font-size。默认情况下,html元素的font-size为16px, rem单位都是相对于根元素html的font-size来决定大小的,根元素的font-size相当于提供了一个基准,当页面的size发生变化时,只需要改变font-size的值,那么以rem为固定单位的元素的大小也会发生响应的变化。 因此,如果通过rem来实现响应式的布局,只需要根据视图容器的大小,动态的改变font-size即可。


rem2px和px2rem:

如果在响应式布局中使用rem单位,那么存在一个单位换算的问题,rem2px表示从rem换算成px,这个就不说了,只要rem乘以相应的font-size中的大小,就能换算成px。更多的应用是px2rem,表示的是从px转化为rem。  

比如给定的视觉稿为750px(物理像素),如果我们要将所有的布局单位都用rem来表示,一种比较笨的办法就是对所有的height和width等元素,乘以相应的比例,现将视觉稿换算成rem单位,然后一个个的用rem来表示。另一种比较方便的解决方法就是,在css中我们还是用px来表示元素的大小,最后编写完css代码之后,将css文件中的所有px单位,转化成rem单位。


rem 布局的缺点:

通过rem单位,可以实现响应式的布局,特别是引入相应的postcss相关插件,免去了设计稿中的px到rem的计算。rem单位在国外的一些网站也有使用,这里所说的rem来实现布局的缺点,或者说是小缺陷是:在响应式布局中,必须通过js来动态控制根元素font-size的大小。也就是说css样式和js代码有一定的耦合性。且必须将改变font-size的代码放在css样式之前。 


什么是vw?

css3中引入了一个新的单位vw,与视图窗口有关,vw表示相对于视图窗口的宽度,除了vw,还有vmin和vmax两个相关的单位。各个单位具体的含义如下: 单位含义vw相对于视窗的宽度,视窗宽度是100vw相对于视窗的高度。


vw和%的区别为:  

单位含义%大部分相对于祖先元素,也有相对于自身的情况(border-radius、translate等)vw/vh相对于视窗的尺寸。

从对比中我们可以发现,vw单位与百分比类似,单确有区别,前面我们介绍了百分比单位的换算困难,这里的vw更像"理想的百分比单位"。任意层级元素,在使用vw单位的情况下,1vw都等于视图宽度的百分之一。


vw单位换算:

同样的,如果要将px换算成vw单位,很简单,只要确定视图的窗口大小(布局视口),如果我们将布局视口设置成分辨率大小,比如对于iphone6/7 375*667的分辨率,那么px可以通过如下方式换算成vw: 

1px = (1/375)*100 vw


vw单位的兼容性:

绝大多数的浏览器支持vw单位,但是ie9-11不支持,vw单位在绝大部分高版本浏览器内的支持性很好,但是opera浏览器整体不支持vw单位,如果需要兼容opera浏览器的布局,不推荐使用vw。  

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/1490

CSS两列布局的N种实现

两列布局分为两种,一种是左侧定宽、右侧自适应,另一种是两列都自适应(即左侧宽度由子元素决定,右侧补齐剩余空间)。在CSS面试题里面属于常考题,也是一个前端开发工程师必须掌握的技能

浮动,定位,flex布局

正常的布局流是将元素放置在浏览器视口内的系统:块级元素(display:block)在视口中垂直布局——每个都将显示在上一个元素下面的新行上,并且它们的外边距将分隔开它们。

flex布局

Flex(Flexible Box)弹性布局:任何一个容器都可以指定为Flex布局,注意,设为flex布局以后,子元素的float、clear和vertical-align属性将失效,采用flex布局的元素,称为flex容器(flex container)

css实现保持div的等宽高比

css如何实现高度height随宽度width变化保持比例不变呢?即给定可变宽度的元素,它将确保其高度以响应的方式保持成比例(即,其宽度与高度的比率保持恒定)。这里以 4:3 为例,通过2种方式来实现

前端之移动页面布局

Native App 原生app手机应用程序使用原生的语言开发的手机应用,Android系统用的是java,iOS系统用的是object-C;Hybrid App 混合型app手机应用程序混合使用原生的程序和html5页面开发的手机应用

flex布局,学习flex弹性布局总结

flex布局(Flexible Box)是对界面css盒模型的一个优化,适应不同尺寸的屏幕,被定义flex的容器可以控制子元素的排列方向和大小,能够用更简单清晰的代码来完成复杂的布局。

网站首页设计常见的6种布局方式

看到太多的网页设计师发布企业站的个人作品,设计中总是摆脱不了大框套小框的设计布局思路,不加思索的跳入单一的网页布局形式中,于是就有了把企业站常用的页面布局方式总结一下的想法

html使用frame框架导航跳转至指定的节的用法

主要内容:左侧的导航框架包含了一个链接列表,这些链接将第二个框架作为目标。第二个框架显示被链接的文档。导航框架其中的链接指向目标文件中指定的节。

css两端对齐——div+css布局实现2端对齐的4种方法总结

css两端对齐,通过margin负值、justify、space-between、column-count等多种方式来实现css的两端对齐。

实现两端对齐布局_text-align:justify

但是当里面的i个数太多,就会换行,就导致换行的那几个个i就会在新的一行左右对齐分布,解决的方法是在最后一个i后面补上几个i,这个个数加上换行的i的个数要等于第一行i的个数,见代码

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!