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. SpringMVC轻松学习-其他常用（四）

    Spring MVC 3.0 深入 核心原理 1.      用户发送请求给服务器.url:user.do 2.      服务器收到请求.发现DispatchServlet可以处理.于是调用Disp ...

  2. $.extend 用法

    此处参考了RascallySnake 的博客 $.extend(boolean, dest, src1, src2, src3) 第一个参数boolean代表是否进行深度拷贝,其余参数和前面介绍的一致 ...

  3. bzoj-4318 OSU! 【数学期望】

    Description osu 是一款群众喜闻乐见的休闲软件.  我们可以把osu的规则简化与改编成以下的样子:  一共有n次操作,每次操作只有成功与失败之分,成功对应1,失败对应0,n次操作对应为1 ...

  4. ASP.NET脚本过滤-防止跨站脚本攻击[转]

    ASP.Net 1.1后引入了对提交表单自动检查是否存在XSS(跨站脚本攻击)的能力.当用户试图用<xxxx>之类的输入影响页面返回结果的时候,ASP.Net的引擎会引发一个HttpReq ...

  5. iOS开发中视图控制器ViewControllers之间的数据传递

    iOS开发中视图控制器ViewControllers之间的数据传递 这里我们用一个demo来说明ios是如何在视图控制器之间传递重要的参数的.本文先从手写UI来讨论,在下一篇文章中讨论在storybo ...

  6. BZOJ3270: 博物馆

    3270: 博物馆 Time Limit: 30 Sec  Memory Limit: 128 MBSubmit: 269  Solved: 147[Submit][Status][Discuss] ...

  7. Python的zip函数

    zip函数接受任意多个(包括0个和1个)序列作为参数,返回一个tuple列表.具体意思不好用文字来表述,直接看示例: 1.示例1: x = [1, 2, 3] y = [4, 5, 6] z = [7 ...

  8. 【Xilinx-Petalinux学习】-02-建立PetaLinux工程

    前面我已经把PetaLinux成功安装到了Ubuntu虚拟机当中了,接下来就要实际操作,将PetaLinux移植到我们自己的硬件平台当中去. step1:硬件描述文件 有两种PetaLinux工程建立 ...

  9. 不错的Django技术网址

    Ajax与json需要看得 http://stackoverflow.com/questions/30243101/return-queryset-as-json

  10. 真机调试iwatch

    http://blog.csdn.net/chenyufeng1991/article/details/48976639 错误:no symbols for paired Apple Watch 错误 ...