澳门新浦京娱乐场网站-www.146.net-新浦京娱乐场官网
做最好的网站

澳门新浦京娱乐场网站初窥响应式布局,别讲你

如何更愉快地使用rem —— 别说你懂CSS相对单位

2018/09/03 · CSS · rem

原文出处: Keith J.Grant   译文出处:Yuying Wu   

前段时间试译了Keith J.Grant的CSS好书《CSS in Depth》,其中的第二章《Working with relative units》,书中对relative units的讲解和举例可以说相当全面,看完之后发现自己并不太懂CSS相对单位,也希望分享给大家,所以有了这个译文系列。(若有勘误或翻译建议,欢迎 Github PR ^_^)

《别说你懂CSS相对单位》系列译文:

  • 如何更愉快地使用em
  • 如何更愉快地使用rem [本文]
  • 视口相关单位的应用
  • 无单位数字和行高
  • CSS自定义属性

本文对应的章节目录:

  • 2.2 em和rem
    • 2.2.2 对font-size使用rem
      • 可用性:对font-size使用相对长度单位
  • 2.3 停止使用像素思维去思考
    • 2.3.1 设置一个合理的字号默认值
    • 2.3.2 让这个面板变得“响应式”
    • 2.3.3 调整单个组件的大小

概念介绍:

澳门新浦京娱乐场网站 1

随着越来越多不同分辨率和大小的显示器终端出现在市场上,原先用一个板式的web页面设计和布局来应对所有设备的做法遇到了越来越多的问题,针对宽屏设备开发的页面在手机或者pad上布局会产生各种错位或者Bug,大幅度降低了用户体验。

2.2 em和rem

1、px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时一般都有DPI可选。Windows系统默认是96dpi,Apple系统默认是72dpi。

国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢?

响应式布局就是为了应对这样的情况而出现的一种设计方式,其核心理念是在不同的设备宽度上应用不同的样式和设计。Responsive web design(RWD):的基本设计思路是:

2.2.2 对font-size使用rem

当浏览器解析HTML文档时,创建了一个用来代表页面元素的集合,叫做DOM(文档对象模型,Document Object Model)。树状结构,每一个节点代表一个元素。<html>就是顶层节点(根节点),在下面的是它的子节点<head><body>,再往下就是它们的子节点,还有后代节点,如此类推。

根节点是文档里所有其他元素的祖先。它有一个特别的伪类(pseudo-class)选择器(:root),在样式表里可以用这个选择器表示。使用带类名的类型选择器html,或者直接用标签选择器,效果是一样的。

rem是根em(root em)的缩写。rem是和根元素关联的,不依赖当前元素。不管你在文档中的什么地方使用这个单位,1.2rem的计算值是相等的,等于1.2倍的根元素的字号大小。下面的示例代码中,声明了根元素的字号大小,并在嵌套的无序列表中使用rem声明字号大小。

[ 代码片段 2.10 使用rem声明字号大小 ]

:root { 1 font-size: 1em; 2 } ul { font-size: .8rem; }

1
2
3
4
5
6
7
:root {                    1
  font-size: 1em;          2
}
 
ul {
  font-size: .8rem;
}
  • 1 伪类 :root 等价于 html 选择器
  • 2 使用浏览器的默认字号大小(16px)

在这个示例里,根字号大小是浏览器的默认大小16px(根元素的1em等于浏览器的默认字号大小)。无序列表的字号大小为0.8rem,计算结果是12.8px。因为这只跟根元素相关,尽管你在列表里嵌套了列表,嵌套子列表的字号仍然保持不变。

可用性:对font-size使用相对长度单位

一些浏览器会提供给用户2种方式定制文字的大小:缩放和设置一个默认的字号大小。通过按Ctrl 或者Ctrl-,用户可以对页面进行缩放。这在视觉上会把整个页面的文字或图片(其实是所有元素)都放大或缩小了。在一些浏览器,这个改变只针对当前的标签页且是临时的,不会影响到新开的标签页。

设置默认字号大小,会有点不一样。不仅仅是设置的入口比较难找(一般在浏览器的设置页),而且这个设置是永久的,直到用户把默认值还原。值得注意的是,这个设置对使用px或其他绝对单位定义的字号大小无效。因为默认字号大小对一些用户是必要的,尤其是弱视的群体,你应该用相对单位或百分比来定义字号的大小。

rem简化了很多em带来的复杂度。事实上,rem提供了一个在px和em间的相对单位折中解决方案,而且更易于使用。那么,是不是意味着你应该在对所有元素都使用rem,去掉其他长度单位呢?当然不是。

在CSS的世界里,这个答案通常是,看情况。rem只是你的工具箱中的其中一个。掌握CSS很重要的一点,就是学会分辨在什么场景下该使用什么工具。我的选择是,对font-size使用rem,对border使用px,对其他的度量方式如paddingmarginborder-radius等使用em。然而在必要时,需要声明容器的宽度的话,我更喜欢使用百分比。

这样,字号大小就变得可预测,而当其他因素影响到元素的字号大小时,你也可以借助em去缩放元素的padding和margin。在border上使用像素是很合适的,尤其当你想要一根漂亮的线的时候。以上就是我对不同属性使用不同单位的理想方案,不过我要再次声明,这些都是工具,在某些特定场景下,利用不同的工具可能取到更好的效果。

提示

当你不确定的时候,对font-size使用rem,对border使用px,以及对其他大多数属性使用em。

2、em(相对长度单位,相对于当前对象内文本的字体尺寸):是一个相对长度单位,最初是指字母M的宽度,故名em。现指的是字符宽度的倍数,用法类似百分比,如:0.8em, 1.2em,2em等。通常1em=16px。

PX特点

1、采用 CSS 的 media query 技术

2.3 停止使用像素思维去思考

把页面的根元素字号大小定义为0.625em或者62.5%,在最近几年来,这样的用法很常见,这是一种模式,或者更贴切地说,这是一种反模式。

[ 代码片段 2.11 反模式:全局地把font-size定义为10px ]

JavaScript

html { font-size: .625em; }

1
2
3
html {
  font-size: .625em;
}

我并不推荐这种用法。这个用法把浏览器默认的字号大小16px缩小到10px。这样做的好处是简化了计算,如果设计师告诉你字号大小应该是14px,那你可以很轻易地计算出1.4rem,毕竟我们还是在使用相对单位。

一开始,这看起来很方便,但事实上这样的实现方式有两个问题。第一,强制你写了很多重复的样式代码。10px对于大多数文本来说太小了,你需要在整个页面中,来来回回地覆盖它。你会发现,自己把一段段落(<p>)的字号大小声明为1.4rem,然后又把导航(<nav>)的链接字号大小声明为1.4rem,样式代码中还有很多这样的用法。这样引入了更高的错误风险,当你需要修改时发现代码耦合程度比较高,同时也会让样式文件变大。

第二个问题是,你这么做的时候,其实你还是在用像素的思维在思考。虽然在代码里写的是1.4rem,但是在你的脑子里,其实还是想的是14px。在响应式网页开发中,你应该学会适应那些“模糊”的值。1.2em实际等于多少像素,并不重要,你只需要知道这是比继承的字号大一点点,那就足够了。而且,如果在屏幕上这不是你想要的效果,那就改吧。这是需要时间实验和试错的,但事实上,使用px的时候我们也需要这样做。(在第13章,我们会有更具体的方式来优化这个实现方式。)

当使用em时,我们很容易陷入纠结,这个值转化成像素值会是多少呢?尤其对于字号大小。你一直在乘和除以em值,这样你很快就会疯掉了。相反,我希望你可以接受一项挑战,尝试培养先开始使用em的习惯。如果你习惯使用像素,那转成em是需要一定时间和练习的,但相信我,这很值得。

这不是在说你再也不使用像素了。如果你跟一个设计师合作,你可能需要用更精确的像素值去沟通,这没问题的。在项目的开始,你需要声明一个基础的字号大小(通常是对标题或者标注的常用字号)。使用绝对值去描述大小,往往会更加容易。

转换成rem会有计算环节,那就让计算器去忙吧(通常我会在Mac电脑上按cmd 空格,在Spotlight里计算)。首先在根元素上声明根字号大小,从那开始,使用像素应该是例外的情况,而不是常态。

在这章内容里,我还是会持续地聊起像素。这会有助于我解释相对单位的工作原理,同时也能帮助你培养计算em值的习惯。在这章之后,我基本会使用相对单位来讨论字号的大小。

3、pt (point,磅):是一个物理长度单位,指的是72分之一英寸。pt=1/72(英寸), px=1/dpi(英寸)

  1. IE无法调整那些使用px作为单位的字体大小;

  2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;

2、流体布局( fluid grids )

2.3.1 设置一个合理的字号默认值

先假设你想把默认字号设定为14px。把10px设定为基准值,再在页面中去覆盖它的写法,我们不推荐这种写法,相反,你应该在根元素上直接声明一个值。
在这个代码片段里,目标字号值是继承的,浏览器的默认值16px,那么14/16 = 0.875。

把下面的代码添加到一个新的样式表的最上面,我们会在这上面添加其他代码。这里设定根元素(<html>)的默认字号大小。

[ 代码片段 2.12 设定正确的默认字号大小 ]

JavaScript

:root { 1 font-size: 0.875em; 2 }

1
2
3
:root {                    1
  font-size: 0.875em;      2
}
  • 1 或者使用 HTML 选择器
  • 2 14/16(期望值px / 继承值px)等于0.875

现在,你的期望基准字号14px对整个页面的元素有效,你不需要在其他地方重新声明了。你只需要在设计不一样的地方修改成新的字号,譬如标题。

我们一起来创建图2.7那样的面板吧!你创建的这个面板,基于14px字号,使用相对单位。

[ 图 2.7 使用相对单位和继承字号的面板 ]

澳门新浦京娱乐场网站 2

下面是模板,加到你的页面吧。

[ 代码片段 2.13 面板的模板 ]

<div class="panel"> <h2>Single-origin</h2> <div class="panel-body"> We have built partnerships with small farms around the world to hand-select beans at the peak of season. We then carefully roast in <a href="/batch-size">small batches</a> to maximize their potential. </div> </div>

1
2
3
4
5
6
7
8
9
<div class="panel">
  <h2>Single-origin</h2>
  <div class="panel-body">
    We have built partnerships with small farms around the world to
    hand-select beans at the peak of season. We then carefully roast
    in <a href="/batch-size">small batches</a> to maximize their
    potential.
  </div>
</div>

下一段代码是样式的。你会在paddingborder-radius使用em,标题的字号使用rem,以及border使用px。把下面代码添加到你的样式表吧。

[ 代码片段 2.14 使用相对单位的面板 ]

.panel { padding: 1em; 1 border-radius: 0.5em; 1 border: 1px solid #999; 2 } .panel > h2 { margin-top: 0; 3 font-size: 0.8rem; 4 font-weight: bold; 4 text-transform: uppercase; 4 }

1
2
3
4
5
6
7
8
9
10
11
12
.panel {
  padding: 1em;                    1
  border-radius: 0.5em;            1
  border: 1px solid #999;          2
}
 
.panel > h2 {
  margin-top: 0;                   3
  font-size: 0.8rem;               4
  font-weight: bold;               4
  text-transform: uppercase;       4
}
  • 1 对padding和border-radius使用em
  • 2 用1px定义细边框
  • 3 把面板上面多余的空间去掉,更多解释看第3章
  • 4 用rem控制标题的字号大小

这段代码给面板添加了一个细边框以及定义了标题的样式。我希望标题的字号小一点,但要加粗和全是大写。(你可以根据自己的设计,把字号改大点或者使用不同的排版方式)

第二个选择器>是一个直接后代组合选择符(direct descendant combinator),它代表的是.panel下的子元素h2。更完整的选择器和组合选择符的索引可以看附录A。

在代码片段2.13中,为了更清晰看到效果,我给body添加了一个类panel-body,不过你会发现,在你自己的代码里是不需要的。因为这个元素从根元素上继承了字号大小,它已经是你想要看到的那样。

4、rem(root em,根em):是CSS3新增的一个相对单位,这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。**

3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。

3、自适应的图片/视频等资源素材

2.3.2 让这个面板变得“响应式”

我们再更深入地看看这个问题。你可以根据屏幕尺寸的变化,添加媒体查询来改变基础字号大小,这可以令面板在不同尺寸的屏幕下,有不同的大小变化。(见图2.8)

[ 图 2.8 在不同屏幕大小的响应式面板:300px(左上角),800px(右上角),1440px(下面) ]

澳门新浦京娱乐场网站 3

媒体查询(media query) —— 通过@media规则来声明样式,在不同的屏幕尺寸或者媒体类型(如打印机或显示器)下,触发对应的样式控制。这是响应式设计的关键要素。详情看代码片段2.15的这个例子,我在第8章会更深入的讨论媒体查询这个话题。

为了实现上面说的效果,把你的样式代码改成这样。

[ 代码片段 2.15 ]

CSS

:root { 1 font-size: 0.75em; 1 } 1 @media (min-width: 800px) { 2 :root { 2 font-size: 0.875em; 2 } 2 } 2 @media (min-width: 1200px) { 3 :root { 3 font-size: 1em; 3 } 3 }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
:root {                            1
  font-size: 0.75em;               1
}                                  1
 
@media (min-width: 800px) {        2
  :root {                          2
    font-size: 0.875em;            2
  }                                2
}                                  2
 
@media (min-width: 1200px) {       3
  :root {                          3
    font-size: 1em;                3
  }                                3
}
  • 1 针对所有屏幕,但是在更大的屏幕会被覆盖
  • 2 针对比800px更宽的屏幕,覆盖默认样式代码
  • 3 针对比1200px更宽的屏幕,覆盖以上两套样式代码

第一套样式规则,声明了小屏幕中的默认字号大小,这是我们想要在较小的屏幕上看到的字号大小。然后使用媒体查询,把800px和1200px分别作为两个分水岭逐级增加字号的大小,覆盖掉默认的代码。

针对页面的根元素使用这些字号大小,响应式地重新定义em和rem对应的值,从而达到响应改变整个页面的效果。尽管你没有直接对这个面板做任何的修改,它现在是响应式的。在小屏幕上,譬如一台手机,字号大小会被渲染成更小的(12px)。然后,在更大的屏幕上,宽大于800px和大于1200px的,组件的字号会分别放大到14px和16px。改变你的浏览器窗口,看看组件是怎么变化的吧。

如果你在整个页面中像这样严格使用相对单位,整个页面会随着视窗大小放大和缩小。这会是你的响应式策略里很重要的一部分。上面的2套媒体查询声明代码,可以帮助你节省在页面的其他部分使用媒体查询的额外代码。不过,如果你在元素中声明的字号大小是以像素为单位的,那就不会产生任何效果了。

类似地,如果你的老板或者客户觉得现在网站的字号太小或者太大,你随时可以做到通过修改一行代码影响到全局的元素,这项改变会影响到页面上的其他元素,不费吹灰之力。

1、em与px的问题

 

此外,记得带上常常使用的标签:

2.3.3 调整单个组件的大小

你也可以通过使用em缩放页面上的一个独立组件。有时,你可能会需要界面上的某些组件可以有个大号的版本。在我们的面板上这么做吧,首先你需要给面板添加一个类名large<div class="panel large">

在图2.9,我们看到了面板的普通版和大号版的比较。效果类似响应式面板,但是两种尺寸是可以同时在同一个页面中使用的。

[ 图 2.9 在一个页面上的普通尺寸面板和大号面板 ]

澳门新浦京娱乐场网站 4

我们来对面板的字号声明方式做一些小的修改。你还是在使用相对单位,但需要调整它们的基准值。第一点,给每个面板的父元素字号大小的定义font-size: 1rem。这里指的是,不管在什么地方使用这个面板,每个面板的字号大小是一个确定值。

第二点,使用em重新声明标题的字号大小,而不使用rem,这样标题就可以和刚才声明的父元素字号1rem关联起来。下面是对应的代码,更新下你的样式表代码吧。

[ 代码片段 2.16 创建一个面板的大号版本 ]

CSS

.panel { font-size: 1rem; 1 padding: 1em; border: 1px solid #999; border-radius: 0.5em; } .panel > h2 { margin-top: 0; font-size: 0.8em; 2 font-weight: bold; text-transform: uppercase; }

1
2
3
4
5
6
7
8
9
10
11
12
13
.panel {
  font-size: 1rem;               1
  padding: 1em;
  border: 1px solid #999;
  border-radius: 0.5em;
}
 
.panel > h2 {
  margin-top: 0;
  font-size: 0.8em;              2
  font-weight: bold;
  text-transform: uppercase;
}
  • 1 给组件声明确定的字号大小
  • 2 其他元素的字号大小用em和父元素字号关联

这些修改看起来并没有影响面板的样式,但是现在你已经准备好了,做一个大号的面板只需要修改一小行代码。你需要做的,就是把父元素字号大小改写成1rem以外的一个值。因为其他元素的计算方式都依赖父元素的字号大小,只要修改它,整个面板的相关尺寸都会发生改变。添加下一个CSS代码片段到你的样式表,定义一个大号面板吧。

[ 代码片段 2.17 利用一行代码放大整个面板 ]

CSS

.panel.large { 1 font-size: 1.2rem; }

1
2
3
.panel.large {               1
  font-size: 1.2rem;
}
  • 1 组合选择器指向同时有panel类和large类的元素

现在,你可以给普通面板添加class="panel"和给大号面板添加class="panel large"。类似地,你也可以定义一个小号版本,只需要把父元素的字号设得比1rem小。如果这个面板是一个更复杂的组件,包含多种字号大小或padding,也只需要一个声明就可以重置大小,只要所有的子元素都是使用em声明的。

1 赞 收藏 评论

澳门新浦京娱乐场网站 5

px是何物?

px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)

<link type="text/css" rel="stylesheet" href="css/normalize.css">

px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册) 

 

<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0">

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)

<meta http-equiv=X-UA-Compatible content="IE=edge">

PX特点

 

1、基于多大的模板?

目前的web开发一般基于pc端,显示器的尺寸一般在13寸以上,因此模板的大小往往超过1200px,而苹果手机的显示器宽度在320px,为了适应这种宽度的变化,网页在设计时必须考虑到宽度在320px-1200px时网页排版有可能发生的各种变化。

在有专门的设计师或者美工时,可以根据他的设计图来进行不同页面的开发,比如根据1200px宽度、800px和320px宽度下的设计图进行页面开发。

  1. IE无法调整那些使用px作为单位的字体大小;

  2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

2、对页面的不同部分进行修改?

可以将页面分为头部、主体和页脚三个部分,每个部分对分辨率的变化的反应程度可以有所不同,比如头部可以在320 480 800时分别拥有不同的布局,而主体在600和1000时分别有各自的布局,这是没有问题的。

3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。

 

3、分辨率单位

前端在开发的时候常常要和三种像素单位打交道,rem em和px。下面来介绍一下三种分辨率的不同:

PX

px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

PX特点

  1. IE无法调整那些使用px作为单位的字体大小;

  2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;

  3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。

EM

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。

EM特点

  1. em的值并不是固定的;

  2. em会继承父级元素的字体大小。

注意:任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

所以我们在写CSS的时候,需要注意两点:

  1. body选择器中声明Font-size=62.5%;

  2. 将你的原来的px数值除以10,然后换上em作为单位;

  3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。

REM

rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子:

p {font-size:14px; font-size:.875rem;}

注意: 选择使用什么字体单位主要由你的项目来决定,如果你的用户群都使用最新版的浏览器,那推荐使用rem,如果要考虑兼容性,那就使用px,或者两者同时使用。

px 与 rem 的选择?

对于只需要适配少部分手机设备,且分辨率对页面影响不大的,使用px即可 。

对于需要适配各种移动设备,使用rem,例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。

 

来源:http://www.runoob.com/w3cnote/px-em-rem-different.html

 

由于这样的差别,我们在制作响应式布局页面的时候,应该优先选择相对根大小的rem单位了,在html中将font-size设置为62.5%, 这样1rem就和10px等值了。

 

 

EM特点 

4、自适应布局

在制作响应式布局时,我们往往会使用自适应的布局,因为目前移动端设备五花八门,屏幕的宽度也没有统一标准,因此可以随着屏幕拉伸改变宽度的自适应的页面肯定要由于固态宽度的布局。

那么在制作自适应的布局时,要尽量避免使用固定困高,而是用百分比宽高,在多列布局时可以用calc() 来对内容进行布局,如calc(P - 20rem);也可以对子元素进行布局,比如div中进行三列布局时,可以设置每个子元素的大小为calc(100%/3),此时要注意,一定要在父元素中设置font-size:0,如若不然,子元素之间的空白符会被计算成字符单位,从而使子元素之间产生空隙,导致错位。

对于一些希望使其浮动的元素,也可以用display:inline-block 来代替float:left;希望图片等元素居中时,可以设置display为block,之后设置margin为 0 auto 。

 

em是何物?
em 指字体高,任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。为了简化font -size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

  1. em的值并不是固定的;

  2. em会继承父级元素的字体大小。

5、media query

媒体查询可以说是响应式布局的核心,语法为:

@media only screen and (max-width: 50em){

[Content]

}

也就是在屏幕宽度为800px(50*16)是,页面采取该样式,花括号中的样式会覆盖默认的样式,但是不会进行重写,因此对需要的属性进行操作即可。要注意的地方是,这里尽量使用em而不是rem单位,这里的数值和单位由于是读取浏览器的,不收到html 或者 body中font-size的影响,换算比例始终为1:16 。

 

em特点:
1em指的是一个字体的大小,它会继承父级元素的字体大小,因此并不是一个固定的值。任何浏览器的默认字体大小都是16px。因此,12px = 0.75em。实际应用中为了方便换算,通常会如下设置样式:
CSS代码
html { font-size: 62.5%; }

 

6、自适应图片

用srcset属性或者picture标签,来对不同位置的图片使用不同分辨率的文件。

 

这样,1em = 10px。我们常用的1.2em理论上就是12px。但是,这个换算在IE浏览器下不成立,1.2em会比12px稍大一些,解决办法是把html标签样式中的62.5%改成63%,即:
CSS代码
html { font-size: 63%; }  

所以我们在写CSS的时候,需要注意两点:

在 中文的文章中,一般会在段首空两格。如果用px作为单位,对12px字体来说需要空出24px,对14px字体来说需要空出28px……这样换算非常不通 用。如果用上em单位,这个问题就很好解决了,1个字的大小就是1em,那两个字的大小就是2em。因此,只需这样定义就行了:
CSS代码
p { text-indent: 2em; }

  1. body选择器中声明Font-size=62.5%;

  2. 将你的原来的px数值除以10,然后换上em作为单位;

  3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

em和px两种字体单位的区别
字体单位应该用em而不用px,原因简单来说就是支持IE6下的字体缩放,在页面中按ctrl 滚轮,字体以px为单位的网站没有反应。px是绝对单位,不支持IE的缩放,em是相对单位。
我在调整本blog的时候,发现不仅仅是字体,将行距(line-height),和纵向高度的单位都用em。保证缩放时候的整体性。

 

em有如下特点:

也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。

  1. em的值并不是固定的;
  2. em会继承父级元素的字体大小。

 

em重写步骤:

rem特点 

  1. body选择器中声明Font-size=62.5%;
  2. 将你的原来的px数值除以10,然后换上em作为单位;
    简 单吧,如果只需要以上两步就能解决问题的话,可能就没人用px了。经过以上两步,你会发现你的网站字体大得出乎想象。因为em的值不固定,又会继承父级 元素的大小,你可能会在content这个div里把字体大小设为1.2em, 也就是12px。然后你又把选择器p的字体大小也设为1.2em,但如果p属于content的子级的话,p的字体大小就不是12px,而是1.2em= 1.2 * 12px=14.4px。这是因为content的字体大小被设为1.2em,这个em值继承其父级元素body的大小,也就是16px * 62.5% * 1.2=12px, 而p作为其子级,em则继承content的字体高,也就是12px。所以p的1.2em就不再是12px,而是14.4px。
    3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明,也就是避免以上提到的1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。
    IE中的12px汉字:
    完成 em转换时还发现了一个诡异的现象,就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小,而 是稍大一点。你只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时,对于浮点的取值精确度有 限。本现象只发生在12px的汉字,英文不存在此现象。解决方法就是把style.css中的62.5%换 为63%。

rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是

一个px、em、pt单位转换工具:

一个例子:

地址:

p {font-size:14px; font-size:.875rem;}

2、rem特点 

注意: 

        rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。 

选择使用什么字体单位主要由你的项目来决定,如果你的用户群都使用最新版的浏览器,那推荐使用rem,如果要考虑兼容性,那就使用px,或者两者同时使用。

举例:

在这里为大家提供一个px,em,rem单位转换工具

p {font-size:14px; font-size:.875rem;}

地址:

注意: 

澳门新浦京娱乐场网站 6

        选择使用什么字体单位主要由你的项目来决定,如果你的用户群都使用最新版的浏览器,那推荐使用rem,如果要考虑兼容性,那就使用px,或者两者同时使用。

 

3、字体换算表 

番外篇:

字号

pt

px

em

初号

42pt

56px

3.5em

小初

36pt

48px

3em

 

34pt

45px

2.75em

 

32pt

42px

2.55em

 

30pt

40px

2.45em

 

29pt

38px

2.35em

 

28pt

37px

2.3em

 

27pt

36px

2.25em

一号

26pt

35px

2.2em

 

25pt

34px

2.125em

小一

24pt

32px

2em

二号

22pt

29px

1.8em

 

20pt

26px

1.6em

小二

18pt

24px

1.5em

 

17pt

23px

1.45em

三号

16pt

22px

1.4em

小三

15pt

21px

1.3em

 

14.5pt

20px

1.25em

四号

14pt

19px

1.2em

 

13.5pt

18px

1.125em

 

13pt

17px

1.05em

小四

12pt

16px

1em

 

11pt

15px

0.95em

五号

10.5pt

14px

0.875em

 

10pt

13px

0.8em

小五

9pt

12px

0.75em

 

8pt

11px

0.7em

六号

7.5pt

10px

0.625em

 

7pt

9px

0.55em

小六

6.5pt

8px

0.5em

七号

5.5pt

7px

0.4375em

八号

5pt

6px

0.375em

在页面中设置字体,我们知道有常见的两种,px 和 em.

    

px

在Web页面制作中,我们一般使用“px”来设置我们的文本,因为他比较稳定和精确。但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,他改变了浏览器的字体大小(虽然一般人不会去改变浏览器字体大小),这时会使用我们的Web页面布局被打破,这时就提出了使用“em”来定义Web页面的字体。

 

em

一般都是bodyfont-size为基准

常用写法:

 1 body {
 2     font-size: 62.5%;
 3     /*10 ÷ 16 × 100% = 62.5%*/
 4 }
 5 h1 {
 6     font-size: 2.4em;
 7     /*2.4em × 10 = 24px */
 8 }
 9 p {
10     font-size: 1.4em;
11     /*1.4em × 10 = 14px */
12 }
13 li {
14     font-size: 1.4em;
15     /*1.4 × ? = 14px ? */
16 }

为什么“li”的“1.4em”是不是“14px”将是一个问号呢?在使用“em”作单位时,一定需要知道其父元素的设置,因为“em”就是一个相对值,而且是一个相对于父元素的值,
计算公式:1 ÷ 父元素的font-size × 需要转换的像素值 = em值
这样的情况下“1.4em”可以是“14px”,也可以是“20px”,或者说是“24px”,总之是一个不确定值,那么解决这样的问题,要么你知道其父元素的值,要么呢在任何子元素中都使用“1em”。

 

 

rem

rem:W3C官网描述是“font size of the root element”,即rem是相对于根元素。
我们只需要在根元素确定一个参考值,在根元素中设置多大的字体,这完全可以根据您自己的需,大家也可以参考下图:

澳门新浦京娱乐场网站 7

嫌换算麻烦的同学,也可以去这个网站去设置

常用写法:

html {
    font-size: 62.5%;
    /*10 ÷ 16 × 100% = 62.5%*/
}
body {
    font-size: 1.4rem;
    /*1.4 × 10px = 14px */
}
h1 {
    font-size: 2.4rem;
    /*2.4 × 10px = 24px*/
}

在根元素中定义了一个基本字体大小为62.5%(也就是10px。设置这个值主要方便计算,如果没有设置,将是以“16px”为基准 )。从上面的计算结果,我们使用“rem”就像使用“px”一样的方便,而且同时解决了“px”和“em”两者不同之处。

注:在Chrome下,默认最下字体为12px,可以设置font-size: 625%,其他以此类推

 

浏览器兼容性

IE9以上等支持CSS3的浏览器是肯定可以支持的,如果想要兼容IE低版本,那可以考虑针对IE9以下低版本浏览器,用px来实现。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

澳门新浦京娱乐场网站初窥响应式布局,别讲你懂CSS相对单位。 

 

 

 

 

 

 

 

 

 

 

 

本文由澳门新浦京娱乐场网站发布于新浦京娱乐场官网,转载请注明出处:澳门新浦京娱乐场网站初窥响应式布局,别讲你