响应式布局
媒体查询,设计原则,查询语法,设备翻转,部分meta添加
1. 媒介类型=各种浏览终端
Media Type 类型
all 匹配所有设备
braille 触觉反馈设备
cmbossed 凸点字符印刷设备
handheld 手持设备
print 打印机设备
projection 投影仪设备
screen 彩色计算机显示器
speech 语音合成器
tty 栅格设备
tv 电视设备
现在的Android,iPhone都不是handheld设备，属于screen。
使用Media Query 媒体查询
2. 响应式设计4原则
重要内容优先
体验一致性
友好链接 （引导清晰，适合手指操作，区块适当）
考虑操作移动设备的习惯 （左手握，右手点）
3. 适配设备媒体判断
width 窗体宽度 视觉屏幕/触摸屏幕 接受min/max
height 窗体高度 视觉屏幕/触摸屏幕
device-width 屏幕宽度 视觉屏幕/触摸屏幕
device-height 屏幕高度 视觉屏幕/触摸屏幕
orientation 手持方向（横/竖） 位图介质类型 否
aspect-ratio 浏览器，纸张长宽比 位图介质类型
device-aspect-ratio 设备屏幕长宽比 位图介质类型
color 颜色模式 视觉媒体
color-index 颜色模式列表整数 视觉媒体
monochrome 整数 视觉媒体
resolution 解析度 位图介质类型
scan 逐行/隔行扫描 电视类 否
grid 整数，返回0或1 栅格设备 否
检测设备翻转，使用JavaScript判断屏幕切换
<link rel="stylesheet" media="screen and ( orientation:portrait)" href="portrait.css"> 横
<link rel="stylesheet" media="screen and ( orientation:landscape)" href="landscape.css"> 竖
外联样式表类似
4. 案例
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-whith,initial-scale=1.0">
/*使用viewport meta 标签在手机浏览器上控制布局，针对Safari浏览器*/
<meta name="apple-mobile-web-app-capable" content="yes">
/*通过快捷方式打开全屏显示*/
<meta name="apple-mobile-web-app-status-bar-style" content="blank">
/*隐藏状态栏*/
<meta name="format-detection" content="telephone=no">
/*iPhone会将看起来像电话号码的数字添加电话连接，应当关闭*/
<title>媒体查询和响应式设计</title>
<style type="text/css" >
body,h2{
margin: 0px;
padding: 0px;
color:white;
}
section#main,header,aside,footer{
background-color: #333;
margin: 5px 0;
}
h2{
text-align: center;
font-size: 3em;
}
section#container{
margin: 0 auto;
width: 960px;
}
header{
float: left;
width: 100%;
line-height: 100px;
}
#left{
float: left;
width: 200px;
line-height: 400px;
}
section#main{
float: left;
width: 540px;
line-height: 400px;
margin-left: 10px;
}
#right{
float: right;
width: 200px;
line-height: 400px;
}
footer{
float: left;
width: 100%;
line-height: 100px;
}
/*1000px以上屏幕，只添加修改部分，其他继承*/
@media screen and (min-width: 1000px){
h2{
color: blue;
}
}
/*pad 640-1000*/
@media screen and (min-width: 640px) and (max-width: 1000px){
h2{
color: red;
}
section#container{
width: 800px;
}
#left{
float: left;
width: 300px;
line-height: 300px;
}
section#main{
float: left;
width: 490px;
line-height: 300px;
margin-left: 10px;
}
#right{
float: left;
width: 100%;
line-height: 100px;
display: none;
}
}
/*pad 640-1000*/
@media screen and (max-width: 640px){
h2{
color: orange;
}
section#container{
width: 100%;
}
#left{
float: left;
width: 100%;
line-height: 200px;
display: none;
}
section#main{
float: left;
width: 100%;
line-height: 300px;
margin-left: 0px;
}
#right{
float: left;
width: 100%;
line-height: 100px;
display: none;
}
}
</style>
</head>
<body>
<section id="container">
<header>
<h2>header</h2>
</header>
<aside id="left">
<h2>left</h2>
</aside>
<section id="main">
<h2>main</h2>
</section>
<aside id="right">
<h2>right</h2>
</aside>
<footer>
<h2>footer</h2>
</footer>
</section>
</body>
</html>
