响应式设计

响应式设计

很多时候我们的web页面不是在单一设备上显示的，PC端、ipad、手机端都有可能显示，我们需要让页面能够自己响应屏幕变化。

响应式设计有三个重要的方面

• 媒体查询 是一种css语法，可以根据浏览器的特性，一般是屏幕或浏览器容器宽度提供css规则
• 流式布局 是使用em或百分比等相对单位设定页面总体宽度，让布局能够随屏幕大小而缩放
• 弹性图片 是使用相对单位确保图片再大也不会超过其容器

媒体查询

可以使用@media规则或者<link>标签的media属性

使用@media

把css样式嵌到@media规则中

媒体类型有

• all 匹配所有设备
• handled 匹配手持设备
• print 匹配分页媒体或打印预览模式下的屏幕
• screen 匹配计算机屏幕

媒体特性

• min-device-width、max-device-width 设备屏幕尺寸
• min-width、max-width 视口的宽度
• orientation (值为portrait和landscape)，设备是横屏还是竖屏

可以使用and、not、or来组合媒体类型和媒体特性

/* 屏幕宽度不超过920px的时候应用*/
@media screen and (max-width:920px){
  .column {
    float:none;
    width:96%;
  }
}

使用<link>

<link>标签中有media属性，规则和@media一样

<link type="text/css" media="screen and (max-width:920px)" href="css/app.css"/>