响应式Web设计:HTML5和CSS3实战(第2版)

第一章 响应式Web设计基础

1.1 定义需求

• 响应式设计可以让一个网站同时适配多种设备和屏幕
• 并不依赖服务端或后端方案

1.2 响应式设计

• 定义：网页内容会随着访问它的视口及设备的不同而呈现不同的样式
• 思路：先为小屏幕设计内容、样式，然后再向大屏幕扩展

1.3 浏览器支持

• 先写一个较轻量的代码结构，然后根据所需的体验针对能力更强的浏览器进行扩展
  • 视觉
  • 功能
• 渐进增强
  • 从最基本体验开始，逐步扩充
• 平稳退化
  • 先做出大而全的版本，然后再针对能力不足的平台寻找后备方案
• 提前确定主要支持平台很重要
  • 推荐网站：www.caniuse.com

1.4 响应式例子

1.4.1 html

• 默认情况下网页布局上弹性的，缩放浏览器窗口，文字会自动重排
• iphone会将网页按980px宽度渲染，然后缩放到视口（viewport）中
  <meta name="viewport" content="width = device-width">

1.4.2 picture

• 图片宽度按容器宽度自动缩放

        img {
            max-width: 100%;
        }

• width:100%
  • 会导致图片永远都占满容器，不考虑图片本身宽度

1.4.3 媒体查询

• 断点应该由内容和设计本身决定， 不应该由流行的主流设备宽高设置
• 表现形式：
  • @media screen and (max-width: 50em);
  • 只适合宽度在50em以下的情况下
• 以最小屏幕为起点，再根据需求渐进扩展视觉和功能