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. 一个简单易懂的javascrip selection&range小案例

    在制作富文本编辑器,尤其是在制作以div元素为编辑器区域时,当鼠标离开编辑区域以后会失去焦点,失去选区,这时候就要通过selection&range来重新设置选区.[以下代码尚未考虑IE低版本 ...

  2. Application_Start和Application_End事件执行时间

    Application_start: 第一个访问网站的用户会触发该方法. 通常会在该方法里定义一些系统变量,如聊天室的在线总人数统计,历史访问人数统计的初始化等等均可在这里定义. Applicatio ...

  3. POJ3169差分约束系统

    题意:有n头牛,编号为1到n,对于关系好的ml头牛,al和bl之间的距离不大于dl,关系差的md头牛,ad和bd之间的距离不大于dd,求第1头牛和第n头牛之间的距离 分析:这是一道差分约束系统的题目, ...

  4. 数据库ER图 PowerDesigner

    一.概念数据模型概述数据模型是现实世界中数据特征的抽象.数据模型应该满足三个方面的要求:1)能够比较真实地模拟现实世界2)容易为人所理解3)便于计算机实现 概念数据模型也称信息模型,它以实体-联系(E ...

  5. ajax常用写法

    $.ajax( url,{ type:"post", data:{},}) .done(function() { alert("success"); }) .f ...

  6. 全方位分析Objcetive-C Runtime

    本文详细整理了 Cocoa 的 Runtime 系统的知识,它使得 Objective-C 如虎添翼,具备了灵活的动态特性,使这门古老的语言焕发生机.主要内容如下: 引言 简介 与Runtime交互 ...

  7. 【转】国外程序员整理的Java资源大全

    Java几乎是许多程序员们的入门语言,并且也是世界上非常流行的编程语言.国外程序员Andreas Kull在其Github上整理了非常优秀的Java开发资源,推荐给大家.译文由ImportNew- 唐 ...

  8. label同时设置sizeToFit，NSTextAlignmentCenter不起作用

    问题:label要多行显示,按照这样子设置,iOS9以上work,iOS8无用 self.bookNameLabel.lineBreakMode = NSLineBreakByCharWrapping ...

  9. sql语句：CASE WHEN END 的用法

    select b,c, CASE a ' ' ' end from test1

  10. 如何检测 Android Cursor 泄漏

    简介: 本文介绍如何在 Android 检测 Cursor 泄漏的原理以及使用方法,还指出几种常见的出错示例.有一些泄漏在代码中难以察觉,但程序长时间运行后必然会出现异常.同时该方法同样适合于其他需要 ...