作为一个前端网页设计师，响应式网页不再是特殊需求，而是常态。移动设备(手机、平板电脑等。)超越台式电脑，设计师使用响应式网页设计来设计网站是常有的事。基本上核心归结为一句话，就是自动符合不同设备上的不同内容。为了使网站风格支持响应式设计，最关键的因素是CSS中的媒体查询。媒体查询可以帮助我们在不同内容和大小的设备上定义样式。
动手操作:使用媒体查询
首先，你得定义响应式网页设计的主要对应尺寸。如上所述，媒体查询可以帮助我们定义不同尺寸设备上的内容显示，因此我们只需将特定设备或尺寸上的特定内容的样式添加到我们现有的样式中，例如:
部门容器{
[div]
宽度:100%；
}
@仅媒体屏幕和(最小宽度:480像素){
div . container {
宽度:40%；
}
}
在上面的例子中，我们的定义只有当屏幕的最小宽度大于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]
我们可以看到字体明显放大了。此时，当宽度小于480px时，红色色块的颜色仍然改变，而当30rem=30em=600px时，绿色和蓝色色块的颜色都改变。
[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]
移动:
20em，
平板:
46.24em，
桌面:61.25em，
宽:
81.25em
);
@ import \ & # 8217mq \ & # 8217；
。foo
@ include MQ($ from:mobile，$until: tablet) {
背景:红色；
}
@ include MQ($ from:table t){
背景:绿色；
}
}
本文来自投稿，不代表重蔚自留地立场，如若转载，请注明出处https://www.cwhello.com/86539.html
如有侵犯您的合法权益请发邮件951076433@qq.com联系删除
