CSS中的rem

时间:2021-04-07 11:53:31

为什么会使用rem呢?主要还是浏览器和设备的大小不一。

这样就涉及到页面布局的不统一啦,先说说pc中的多栏布局吧,多栏布局有三种基本的实现方式:固定宽度、流动、弹性,下面我们就分别说说这三种布局吧。

固定宽度布局的大小不会随着用户调整浏览器窗口大小而变化,一般是900到1100像素宽。其中960像素是常见的,因为这个宽度适合所有PC显示器、而且能够被16、12、10、8、6、5、4、3整除,不仅容易计算等宽分栏的数量,而且计算结果也能得到没有小数的像素值。

流动布局的大小会随着用户浏览窗口大小而变化。这种布局能够更好的适应不同的屏幕,但同时意味着放弃对某些方面的控制,比如随着页面宽度变化,文本行的长度和页面元素之间的位置关系都可能变化,在栏宽度加大时会出现内容元素周围添加空白来保持内容居中,当宽度变小,可能会出现重叠。

弹性布局与流动布局类似,在浏览器窗口变化的时候,布局布局变宽,而且所有内容元素的大小也会变化,让人产生一种所有东西都协调的变大或者变小的感觉。

然后说说移动端,在大的pc屏幕的最佳体验和手机中的最佳体验有天壤之别。在pc上,可以使用多栏布局效果很好,但多栏布局到了手机上就会变窄。用一个栏来组织成唯一可行的方案,这样,用户使用简单的扫屏的方式,实现更好的体验。

那么如何实现说的这种响应式设计呢?

小设备上一种布局不能适应多种屏幕尺寸,我们需要一种能够检测屏幕大小的方式,然后响应地修改布局。就是需要让页面能够自己响应屏幕的变化。这这里大家都应该想到能够使用的方式 一种:就是媒体查询的方式。另一种:使用rem 或者em 采用设置html的font-size使元素大小变化,来适应布局的适应。

先说说媒体查询的方式吧,媒体查询实现响应式的要素:

媒体查询:是一种CSS语法,可以根据浏览器的特性,一般是屏幕或浏览器宽度提供CSS规则。

流式布局:同样的使用em或百分比或者rem等相对单位设定页面总体宽度,让布局能够随屏幕大小而缩放。

弹性图片:是使用相对单位确保图片再大也不会超过容器。

媒体查询是CSS代码的容器,其中的CSS只在某些条件(比如,当前页面要被打印或者要显示在某种类型或尺寸的屏幕上)具备时才会应用。媒体查询可以用两种方式来写 @media规则和<link>标签的media属性

@media print{nav{display:none;}}

这句申明为:如果当前页面要打印,就不显示nav元素。

最大屏宽度

@media screen and (max-width:568px) {.clumn{width:96%;}}

这句表示:该屏幕宽度不超过568px,那么css种的.clumn类的元素宽度为96%。

上面这种写法就是断点,断点在这里指的是媒体查询起作用的屏幕宽度,如果设备的宽度等于或者小于断点的宽度,那么css就会起作用。

ok,说了这么多现在该说重点啦,那就是px 、em、rem

在Web页面初期制作中,我们都是使用px来设置我们字体,元素高宽,因为它比较稳定和精确。但是这种方式存在一个问题,当用户在浏览器中浏览我们制作的web页面时,改变了浏览器的字体大小,这时会导致我们的Web页面的布局被打破。影响用户体验,因此,这时就使用em来定义web页面的字体。

使用px为单位是比较方便,而又一致,但在浏览器中放大或缩放浏览页面会存问题,这样就使用em就能解决,只不过em是针对父级元素而言的,使用起来不是很方便。

CSS3新增了一个相对单位rem(root em,根em),这个单位引起啦广泛关注。这个单位与em区别在于使用rem为元素设定字体大小时、仍然是相对大小、但相对的知识HTML根元素的font-size。这个单位可谓相对大小和决定大小的优势于一身,通过它既可以做到只修改根元素就成比例的调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前除了IE8及更早的版本以外,所有浏览器均支持rem。对于不支持它的浏览器,应对方法就是多写一个绝对但闻的声明。这样就可以忽略用rem设定的字体大小:p{font-size:14px;font-size:.7rem}

em 和rem是相对单位,可以对px和em、rem转换工具 http://pxtoem.com/

CSS中的rem