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

---

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

3.6 为不同的屏幕尺寸提供不同的图片

跟目前工作关联不大，暂且跳过。

作者推荐了Matt Wilco的做法，大致思路是由服务器端去生成各种尺寸的图片，并且根据客户端发送过来的关于resolution大小的信息来决定返回什么尺寸的图片。
3.7 流动布局和媒体查询的默契配合

本章前面，我们的导航链接在特定的视口宽度下会折成两行，我们可以使用媒体查询来修正这个问题。

     
    @media screen and (min-width: 1001px) and (max-width: 1080px) {
        #navigation ul li a { font-size: 1.4em; }
    }
    @media screen and (min-width: 805px) and (max-width: 1000px) {
        #navigation ul li a { font-size: 1.25em; }
    }
    @media screen and (min-width: 769px) and (max-width: 804px) {
        #navigation ul li a { font-size: 1.1em; }
    }

媒体查询约束流动布局的变动范围，而流动布局则简化了从一组媒体查询样式过渡到另一组的过渡过程。
3.8 CSS网格系统

该章节介绍了比较流行的几种网格系统，并用其中一种实现了我们之前所绘的页面。因为阅读这本书的时候，Bootstrap已经大行其道并前端开发者所熟知了，就不赘述该书的示例了。但是有一点要注意，Bootstrap这样的网格系统为我们提供了通过比如cols-md-*等样式提供了宽度、字体大小等的预设，但在要求严格按照设计实现界面的情况下，我们还是要自己来设置它们。

---

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

Powered by Discuz! 7.0.0