首页 > 代码库 > 《图解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设计
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。