HTML5学习总结-番外05 响应式布局

1. 响应式布局

　　响应式布局是2015年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。其目的是为用户提欧共更加舒适的界面和更好的用户体验。

2.优缺点

优点：

1) 面对不同分辨率设备灵活性强

2）能够快捷解决多设备显示适应问题

缺点：

1）兼容各种设备工作量大，效率低下

2）代码累赘，会出现隐藏无用的元素，加载时间长。

3 语法

CSS3 media queries的语法如下，

@media only screen and (max/min-width/height: 960px) {
  /* 样式定义 */
}

1）Max Width

@media only screen and (max-width:500px){
  .outDiv {
      margin: 0 auto;
      width: 85%;
      height: 50%;
      background: red;
  }
}

　　该代码段表示只有当屏幕宽度小于500px时才生效。

2） Min Width

@media only screen and (min-width:500px){
  .outDiv {
      margin: 0 auto;
      width: 85%;
      height: 50%;
      background: red;
  }
}

　　该代码段表示只有当屏幕宽度大于500px时才生效。

3） Max/Min Height

　　同 max/min-width ，表示当屏幕高度小于/大于设定值时样式才生效。

4） Multiple Media Queries

　　如果需要定义样式是在某个分辨率区间（比如500px-900px）才生效，就可以叠加使用 max/min-width/height 。

@media only screen  and (mix-width:500px) and (max-width:900px){
  .outDiv {
      margin: 0 auto;
      width: 85%;
      height: 50%;
      background: red;
  }
}

4 例子

1）PC端响应式布局例子参考bootstrap学习总结-02 网格布局

2）移动端响应式布局例子

<!doctype html><!--声明当前文档为html文档-->
<html lang="en"> 
    <head><!--头部-->
        <meta charset="UTF-8"><!--字符编码：utf-8国际编码  gb2312中文编码-->
　　　　　<meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale = 1.0,minimum-scale = 1.0,maximum-scale=1.0">
        <title>Document</title>
        <style>
        *{margin:0px;padding:0px;}
        @media all and (orientation:portrait){
            #box{width:300px;height:500px;background:red;}
        }
        @media all and (orientation:landscape){
            #box{width:300px;height:200px;background:blue;}
        }
        </style>
    </head>
    <body> 
        <div id="box"></div>
    </body>
</html>

　　尝试使用手机浏览器打开此页面，当旋转手机时可以看到效果。

posted @ 2016-09-04 10:42 陈晓楠阅读(566) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

陈晓楠

陈晓楠的小屋

HTML5学习总结-番外05 响应式布局

1. 响应式布局

2.优缺点

3 语法

4 例子

公告