动手操作:使用媒体查询

首先，你得定义响应式网页设计的主要对应尺寸。如上所述，媒体查询可以帮助我们定义不同尺寸设备上的内容显示，因此我们只需将特定设备或尺寸上的特定内容的样式添加到我们现有的样式中，例如:

部门容器{

[div]

在上面的例子中，我们的定义只有当屏幕的最小宽度大于480px时，宽度才会从100%变为40%，而这个480px就是我们通常所说的断点。有关媒体查询的更多属性，请参考Mozilla的文档。但是所谓的480px在同样的情况下会在不同的浏览器显示吗？

[div][div]

断点介绍

断点是什么？在网页设计中，不同设备的布局差别很大。当网页在不同的设备或窗口中缩放时，会根据我们设置的断点参数显示不同的网页布局。在上面的例子中，媒体查询是针对内容的宽度，但是通常父元素的宽度是由它包含的子元素决定的。当然，我们也可以设置一个绝对值。当元素的宽度超过屏幕宽度时，我们的内容将具有水平滚动效果，类似于以下效果:

同样，在高度上也会出现类似的情况，但一般从网页交互和用户体验的角度来说，我们不会限制具体的高度，因为网页的内容是上下滚动的，高度是可以自由延伸的。

虽然断点是一个很好的响应设计的工具，但是如果用户改变了他的浏览器的默认字体大小呢？CSS中常见的几种字体大小单位对于我们做响应式设计还是很重要的，那么如何具体展现呢？

[div][div]

正常条件

铬

我们可以看到在拖动的过程中，三个宽度缩小的div标签的背景颜色同时发生了变化。那是因为系统的字体大小不变而html { font-size:62.5%；}，Chrome下480px = 30em = 30rem。

[div][div]

旅行队

我们可以看到显示效果和Chrome下不一样。当宽度小于480px=30em时，红色块和绿色块的颜色透明度降低，而当宽度小于300px=30rem时，蓝色块开始变化。

[div][div]

更改字体大小

铬

在Chrome下，可以设置>:Appearance >: Font size来改变网页字体。我们将字体大小从预设的中变大。此时Chrome的页面内容正常为1rem=20px，而当html { font-size:62.5%；}之后字体大小变成1 rem = 12.5 px .[div]

[div][div]

旅行队

在Safari下，点按“显示”菜单，按住Option键，然后点按以放大或缩小页面字体。此时我们像在Chrome中一样增加1rem=19.2px的字体大小，加载html时{ font-size:62.5%；}之后字体大小变成1rem=12px。

文字尺寸明显像在Chrome中一样放大，而此时红色色块在宽度小于480px时变色，绿色色块在宽度小于30em=12*1.6*30px=576px时变色，蓝色色块在宽度小于30rem=12*30px时变色。

[div][div]

响应网页断点的规划

即使在同一个设备，不同的浏览器中，不同的单元也会有不同的表现，虽然px在不同的浏览器，甚至不同的设备中表现是一样的。当用户想要改变页面的显示效果(字体大小)，或者在不同的设备上观看网页时，他会根据自己喜欢的网页浏览习惯来改变设置。[div][div]

所以综上所述，设计网页的时候应该用px还是rem？我相信设计者应该已经有答案了:我们应该尽量减少px这个非响应单位。因为不同浏览器对rem的定义不一致，所以会很难预测网页的宽度。所以建议选择em为单位。如果我们提前用SASS编辑CSS，可以用sass-mq这样的工具库进行媒体查询，比如:

$ MQ-断点: (

[div]