首页 | 新闻 | 新品 | 文库 | 方案 | 视频 | 下载 | 商城 | 开发板 | 数据中心 | 座谈新版 | 培训 | 工具 | 博客 | 论坛 | 百科 | GEC | 活动 | 主题月 | 电子展
返回列表 回复 发帖

响应式Web设计:使用HTML5和CSS3实践 (9)

响应式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-*等样式提供了宽度、字体大小等的预设,但在要求严格按照设计实现界面的情况下,我们还是要自己来设置它们。
返回列表