首页 > 代码库 > 《图解CSS3》笔记5 媒体与Responsive设计

《图解CSS3》笔记5 媒体与Responsive设计

Media Type: 媒体类型

  CSS2中的属性,用来指定页面渲染的设备的类型,常用的有:all、screen、print(打印),此外还有针对投影、盲人的多种设备类型

引用方式:

1. <link>标签:      属性名media="screen";

2. @import方式:     @import url(xx.css) screen(用于:CSS文件中引入另一个CSS或者<style>标签中)

3. @media方式:     @media screen { ... }(CSS3中的特性)

 

Media Query: 媒体查询

  CSS3特性,添加了新规则:基于媒体类型 + CSS属性规则定义

使用方式:

1. <link>标签      <link media="screen and (min-width: xxxpx)">

2. 文本方式:      @media screen and (min-width:xxxpx) { ... }

  表达式支持以下关键词:

  not

  only

 

响应式设计的特点:网格布局(弹性布局)、弹性图片、风格灵活

meta标签中视口viewport的content属性值:<meta name="viewport" content="...">

width=device-width, initial-scale=1.0, user-scalable=no

 

《图解CSS3》笔记5 媒体与Responsive设计