CSS（4）-媒介查询，响应式布局, 弹性盒子布局

//打印和屏幕显示不同的字体和字体大小。
@media screen {
p.text{font-family:"Trebuchet MS", Verdana, sans-serif;
font-size: 14px;}
}
@media print {
p.text{font-family:"Times New Roman", Times, Georgia, serif;
font-size: 10px;}
}
@media screen,print{
p.text{font-weight: bold}

//屏幕大于600px小于900px的窗口应该应用的样式
@media screen and (min-width: 600px) and (max-width: 900px){
.header1 {
background: #ccc;
}
}
//判断屏幕方向orientation和屏幕的纵横比device-aspect-ratio

笔记本电脑：

台式电脑

小屏幕手机：320像素以下
大屏手机：320px~768px
平板电脑：768~1024px
PC：1024及以上

响应式设计需要考虑转屏：

<link rel="stylesheet" href="portrait.css" media="screen and (orientation:portrait)"/>
<link rel="stylesheet" href="landscape.css" media="screen and (orientation:landscape)"/>

window.addEventListener('orientationchange', function (obj) {
//编写出发屏幕转屏时的操作
});
只有简单页面才会手写媒介查询，复杂页面往往会采用各种响应式的框架来简化和规范开发
    <meta name="viewpot" content="width=device-width,initial-scale=1.0"/>
<!-- 使用viewport meta标签在手机浏览器上控制布局-->
<meta name="apple-moblile-web-app-capable" content="yes"/>
<!-- 通过快捷方式打开时全屏显示-->
<meta name="apple-mobile-web-app-status-bar-style" content="yes"/>
<!-- 隐藏状态栏-->
<meta name="format-detection" content="telephone=no"/>
使用media-queries.js或者respond.js让IE 9以下的支持响应式设计
<!--[if lt IE 9]>
 <script src="css3-mediaqueries.js"></script>
 <![endif]-->

简单的响应式导航栏。
@media screen and (max-width:320px){
 .logo{height: 40px;
 display:block;}
 .header{height:40px}
 li {line-height:50px;padding:0 15px 0 15px;
 display:block;
 text-align: center;
 border-top:1px solid black}
}

@media screen and (min-width:320px) and (max-width:765px){
 .logo{height:50px;
 display:block;}
 .header{height:50px}
 li{
 line-height:50px;
 padding: 0 15px 0 15px;
 display: block;
 text-align: center;
 border-top:1px solid black
 }
}

@media screen and (min-width:765px) {
 .logo{height:60px;
 display:block;
 float:left}
 .header{height:60px}
 li{
 line-height:50px;
 padding: 0 15px 0 15px;
 display: block;
 float:left;
 text-align: center;
 border-top:1px solid black
 }
}

电脑下载仿真手机浏览器：Opera Mobile Emulator。
chrom调试工具也可以实现手机触屏版和电脑版的切换。
页面响应式布局，和触屏版和电脑版两套方案。

弹性盒子布局

不存在浮动元素脱离正常文档流后需要在某些地方清除浮动的问题

浮动布局存在加载顺序问题

弹性盒子首先对父元素声明：

        display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: flex;

        //对盒子元素设置比例
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
-webkit-flex: 1; /* Chrome */
-ms-flex: 1; /* IE 10 */
flex: 1;

        //设置盒子排列的方向是横向
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
box-orient: horizontal;