1、响应式布局介绍

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

优点：面对不同分辨率设备灵活性强、能够快捷解决多设备显示适应问题

缺点：兼容各种设备工作量大，效率低下；代码累赘，会出现隐藏无用的元素，加载时间长

2、响应式布局的实现

CSS中的Media Query(媒介查询)：设备宽高：device-width , device-height   渲染窗口的宽和高：width height   设备的手持方向：orientation    设备的分辨率：resolution

使用方法：外联、内嵌样式

实现屏幕宽度大于640Px时，背景为红色；屏幕宽度小于640px时，背景为蓝色：

 <!doctype html>
 <html>
 <head>
     <meta charset="utf-8">
     <title></title>
     <link href="4.css" type="text/css" rel="stylesheet" media="only screen and (max-width: 640px)">
     <style>
         @media screen and (min-width:640px) {
             body{
                 background-color: red;
             }
         }
     </style>
 </head>
 <body></body>
 </html>

其中的4.css:

 body{
     background-color: blue;
 }

3、响应式布局实例操作

html代码：

 <!doctype html>
 <html>
 <head lang="en">
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <title></title>
     <link href="1.css" type="text/css" rel="stylesheet">
 </head>
 <body>
     <div class="heading"></div>
     <div class="container">
         <div class="left"></div>
         <div class="main"></div>
         <div class="right"></div>
     </div>
     <div class="footing"></div>
 </body>
 </html>

对应的css文件：

 *{
     margin:0px;
     padding:0px;
 }

 .heading,
 .container,
 .footing{
     margin: 10px auto;
 }
 *heading{
     height:100px;
     background-color: chocolate;
 }
 .left,
 .right,
 .main{
     background-color: cornflowerblue;
 }
 .footing{
     height:100px;
     background-color: aquamarine;
 }

 @media screen and (min-width: 960px){
     .heading,
     .container,
     .footing{
         width:960px;
     }

     .left,
     .main,
     .right{
         float:left;
         height: 500px;
     }

     .left,
     .right
     {
         width: 200px;
     }
     .main{
         margin-left: 5px;
         margin-right: 5px;
         width:550px;
     }
     .container{
         height:500px;
     }
 }

 @media screen and (min-width: 600px) and (max-width: 960px){
     .heading,
     .container,
     .footing{
         width: 600px;
     }

     .left,
     .main
     {
         float: left;
         height: 400px;
     }
     .right{
         display: none;
     }
     .left{
         width: 160px;
     }
     .main{
         width: 435px;
         margin-left: 5px;
     }
     .container{
         height: 400px;
     }
 }

 @media screen and (max-width: 600px){
     .heading,
     .container,
     .footing{
         width: 400px;
     }

     .left,
     .right{
         width: 400px;
         height: 100px;
     }
     .main{
         margin-top: 10px;
         width: 400px;
         height: 200px;
     }
     .right{
         margin-top: 10px;
     }
     .container{
         height: 420px;
     }
 } 

[html5] 学习笔记-响应式布局的更多相关文章

  1. CSS学习笔记——响应式布局

    响应式布局 响应式布局是现在很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案.所谓的响应式布局,就是一个网站能够 ...

  2. Bootstrap学习笔记-响应式布局原理

    响应式布局的原理就是利用css3中@media媒体来实现的 <html> <head> <meta charset="utf-8"> <t ...

  3. html5 + css3 + jQuery + 响应式布局设计

    1. [代码][HTML]代码     <!DOCTYPE html><html dir="ltr" lang="zh-CN">< ...

  4. SharePoint 2013 的HTML5特性之响应式布局

    今天偶然看到一本书<Pro SharePoint 2013 Branding and Responsive Web Development>,看到SharePoint 2013基于HTML ...

  5. SharePoint 2013的HTML5特性之响应式布局

    今天偶然看到一本书<Pro SharePoint 2013 Branding and Responsive Web Development>,看到SharePoint 2013基于HTML ...

  6. CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

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

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

  8. [学习笔记]viewport定义，弹性布局，响应式布局

    一,移动端宽度设置viewport视图窗口,<meta name="viewport" content="width=device-width,initial-sc ...

  9. CSS3学习笔记--media query 响应式布局

    语法:@media screen and (min-width: 320px) and (max-width : 479px) media属性后面跟着的是一个 screen 的媒体类型(上面说过的十种 ...

随机推荐

  1. 从客户端检测到有潜在危险的 Reque

    web.config里面加上<httpRuntime requestValidationMode="2.0" />如下<system.web><htt ...

  2. openstack controller ha测试环境搭建记录（十）——配置neutron（控制节点）

    创建neutron用户:mysql -u root -p CREATE DATABASE neutron;GRANT ALL PRIVILEGES ON neutron.* TO 'neutron'@ ...

  3. jquery中:input和input的区别分析

    :input表示选择表单中的input,select,textarea,button元素,input仅仅选择input元素. <html> <head> <style&g ...

  4. js Date 日期格式化（转）

    var myDate = new Date();myDate.getYear();        //获取当前年份(2位)myDate.getFullYear();    //获取完整的年份(4位,1 ...

  5. jquery之选项卡效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 在spring 3.0中的@value

    在spring 3.0中,可以通过使用@value,对一些如xxx.properties文件 中的文件,进行键值对的注入,例子如下: 1 首先在applicationContext.xml中加入:   ...

  7. iReport折线图

    1.拖动组件面板chart到Summary   2.右击-->chart data  单出   3.   4.X轴和Y轴必须是数字 series:系列 连续,串联 category:类型.部门. ...

  8. leetcode--007 word break I

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+4AAAC5CAIAAAA55fI7AAAZa0lEQVR4nO3dPW7bQIMG4L2MT6B7+A

  9. js中的 substring和substr方法

    原文: http://www.cnblogs.com/chinafine/archive/2009/02/26/1398771.html 1.substring 方法 定义和用法 substring ...

  10. 编写高质量JavaScript代码的基本要点记录

    原文:深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点 1.最小全局变量(Minimizing Globals)的重要性 JavaScript通过函数管理作用域.在 ...