电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 响应式Web设计：使用HTML5和CSS3实践（3） [打印本页]

作者: look_w 时间: 2019-2-18 19:05 标题: 响应式Web设计：使用HTML5和CSS3实践（3）

2. 响应式设计中图片应该尽可能保持精简

为了更好的体现固定宽度的设计在视口大小变化时的存在的问题，作者对网页内容进行了美化。遗憾的是作者并没有将它放置到Github上，得要我们自己到 andthewinnerisnt 上把网页内容保存，然后将还未讲解到的特性等删除，以方便按顺序来阅读和增强代码。这里可能需要稍微花费一点时间，因为很多写法都已经是优化后的了。为了继续前进，简单整理后页面效果如下（跟作者网站没太大区别）：
134602-3c561ec7005d9797.png
3_beautifyOutlook

有两点是需要了解的。

使用到的图片应该尽可能小。

不论是否是响应式Web设计，都应该尽可能减少图片的大小，头部和底部的小彩旗就是通过背景图片的repeat-x来呈现的。

关于重置样式。

各种浏览器渲染HTML时会有各种默认样式，为了统一表现我们通常会导入重置样式在主样式文件的开头。对于HTML5，normalize.css就是不错的选择。

你可以网页窗口拉伸到小于960像素，会看到内容被截断了。同样你可以在手机上访问，想像一下网页内容在手机上会被截断成什么样（开发过程中你可以起个server让后通过手机访问页面; 但是如前面章节提到的，可以简单地用Chrome的插件（个人因为在公司所有的Chrome插件都被禁用了，所以干脆使用Chrome自带的模拟器来模拟，但是这个模拟器并不好用，页面上进行了分辨率设置以后要反复toggle几次emulate mobile选项才生效。嗯，如果有条件不嫌麻烦就整个真正的移动设备模拟器吧）。如下图，在Chrome的进行如下设置。
134602-baf06be8bea16ad0.png
4_emulationSet1

你会发现获取得到的效果居然还不错，那是因为浏览器默认在一定分辨率下渲染页面，然后将网页内容缩小到了�与视口大小匹配。下一节会介绍如何阻止浏览器自动调整页面大小。
134602-a95f0368516f8aba.png
5_mobileEffect

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)