[笔记]html5+css3 响应式设计(RWD,Responsive Web Design)[概述+媒体查询]
书名:<Web设计:HTML5和CSS3实战>
一 概述
1. 为了能够使「一个页面,支持各种客户端屏幕分辨率大小[pc,mobile,pad]」成为可能,Ethan Marcotte提出了响应式网页设计。
将3种已有的开发技巧【弹性网格布局,弹性图片,媒体和媒体查询】整合后,命名为【响应式网页设计(流式设计,弹性布局,塑料布局,流体设计,自适应布局,跨设备设计,弹性设计)】
2. 一句话概括:针对【任意设备】对【网页内容】进行【完美布局】的一种显示机制。
3. html5语义标签和css3字体,动画,变换等功能,给RWD提供了更多可能性
4. 不再迷恋 【像素px】,使用相对度量单位【em或百分比】
5. 视口(ViewPort):页面实际显示区域
屏幕尺寸:设备物理显示区域
6. 【响应式网站】无法替代真正的【移动网站】
二 媒体查询
根据设备显示器特性【视口宽度,屏幕比例,设备方向】设定css样式
1. 使用
1-1) css文件:
@media screen and (max-width: 960px){
body{
background-color: red;
}
}
1-2) <link>标签:
<link rel="stylesheet" type="text/css" media="screen" href="xxx.css">
<link rel="stylesheet" type="text/css" media="screen and ( orientation: portrait) and (min-width: 800px), projection" href="xxx.css">
纵向的宽度大于800px的屏幕或投影仪的时候,加载xxx.css
1-3) css文件里的import
@import url("xxx.css") screen and (max-width:360px); 会增加http请求,影响加载速度
2 可检测特性
width[视口宽度],height[视口高度],device-width[屏幕宽度],device-height[屏幕高度],orientation[屏幕纵横],aspect-ratio[视口宽高比16:9=16/9],device-aspect-ratio[屏幕宽高比],color[xx位色min-color: 16],