css布局的em的用方法

作者 : 开心源码 本文共1878个字,预计阅读时间需要5分钟 发布时间: 2022-05-12 共135人阅读

什么是弹性布局?

使用户的文字大小与弹性布局

使用户的浏览器默认渲染的文字大小是“16px”,换句话说,Web页面中“body”的文字大小在使用户浏览器下默认渲染是“16px”。当然,假如使用户愿意他可以改变这种字体大小的设置,使用户可以通过UI控件来改变浏览器默认的字体大小。

弹性设计有一个关键地方Web页面中所有元素都用“em”单位值。“em”是一个相对的大小,我们可以这样来设置1em,0.5em,1.5em等,而且“em”还可以指定到小数点后三位,比方“1.365em”。而其中“相对”的意思是:

1.相对的计算必然会一个参考物,那么这里相对所指的是相对于元素父元素的font-size。比方说:假如在一个

设置字体大小为“16px”,此时这个

的后代元素教程了是将继承他的字体大小,除非重新在其后代元素中进行过显示的设置。此时,假如你将其子元素的字体大小设置为“0.75em”,那么其字体大小计算出来后就相当于“0.75 X 16px = 12px”;

2.假如使用户通过浏览器的UI控件改变了文字的大小,那么我们整个页面也会进行放大(或者缩小),不至于使用户改变了浏览器的字体后会致使整个页面崩溃(我想这种现像大家都有碰到过,不信你就试试你自己制作过的项目,你会觉得很恐怖)。

大家可以查看这个弹性布局样例。此时你用浏览器的UI控件改变了文字的大小或者者直接“ctrl + ”和“ctrl – ”,你会发现这个弹性布局实例,在浏览器改变字体大小浏览会做出相应的放大和缩小,并不会影响整个页面的布局。注:这个实例的所有HTML和CSS在本教程中教程了都会用到。

至于其余的弹性布局的实例,大家可以浏览Dan Cederholm的Simplebites,并改变文字的大小去浏览。

体验后,是不是觉得弹性布局的页面很灵活呀,而且也像“px”一样的准确。因而,只需我们掌握了“font-size”、“px”和“em”之间的基本关系,我们即可以民以食快速用CSS创立准确的布局。

CSS的Elastigirl引进EM

Elastigirl的“em”是极其强大和灵活的,他不论字体大小是什么,是12px,16或者60,他都可以计算出其值。

em其实就是一种排版的测试单位,而且他的由来还有一段小故事,关于这段小故事我就不和大家说了,由于大家都不是来听我讲故事的,我想大还是喜欢知道他在CSS中的那些事。

在CSS中,“em”实际上是一个垂直测量。一个em等于任何字体中的字母所需要的垂直空间,而和它所占据的水平空间没有任何的关系,因而:

假如字体大小是16px,那么1em=16px。

入门

在我们开始来理解CSS中的这个“em”之前,我们需要知道在浏览器下,他的默认字体大小。正好我们前面也这样做了,在所有现代浏览器中,其默认的字体大小就是“16px”。因而在浏览器下默认的设置将是:

1em = 16px

因而,在一个CSS选择器被写入时,浏览器就有了一个“16px”大小的默认字体。此时我们Web页面中的就继承了这个“font-size:16px;”,除非你在CSS样式中显式的设置的“font-size”值,来改变其继承的值。这样一来,“1em = 16px”、“0.5em = 8px”、“10em = 160px”等等,那么我们也可以用“em”来指定任何元素的大小。

设置Body的font-size

很多前辈在多年的实践中得出一个经验,他们建议我们在中设置一个正文文本所需的字体大小,或者者设置为“10px”,相当于(“0.625em或者62.5%”),这样为了方便其子元素计算。这两种都是可取的。但是我们都知道,的默认字体是“16px”,同时我们也很清楚了,我们改变了他的默认值,要让弹性布局不被打破,就需要重新进行计算,重新进行调整。所以完美的设置是:

body {font-size:1em;}

可是在那个没人爱的IE底下,“em”会有一个问题存在。调整字体大小的时候,同样会打破我们的弹性布局,不过还好,有一个方法可以处理:

html {font-size: 100%;}

公式转换——PXtoEM

假如你是第一创立弹性布局的,最好在身边准备一个计算器,由于我们一开始少不了很多的计算,有了他放心。

像素对于我们来说太密切了,因而我们也将从这开始。首先需要计算出1px和em之间的比例,而后是知道我们需要的px值。通过前面的详情,大家都知道1em总是等于父元素的字体大小,因而我们完全可以通过下面的工式来计算:

1 ÷ 父元素的font-size × 需要转换的像素值 = em值

大家可以参考一下面这张转换表(body字体为16px时的值)

css布局的em的用方法

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » css布局的em的用方法

发表回复