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;