响应式布局实例演示

What is 响应式布局？


       响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
       响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。
       优点：面对不同分辨率设备灵活性强，能够快捷解决多设备显示适应问题。
       缺点：兼容各种设备工作量大，效率低下；代码累赘，会出现隐藏无用的元素，加载时间加长；其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果；一定程度上改变了网站原有的布局结构，会出现用户混淆的情况。


实现响应式布局的几种方式：媒体查询、JS、流体布局、弹性布局...


 使用媒体查询的三种方式




1、直接在CSS中使用




@media 类型（常选all/screen） and（条件1） and（条件2）{

       CSS选择器{

                 CSS属性：属性值；

           }

    } 




2、使用link链接CSS，media属性可以设置媒体查询方式 （常用）
      eg.   <link rel="stylesheet" type="text/css" href="css/02-响应式布局.css"  media="all and (max-width:800px)"/>


3、使用Import导入，直接在url( )后面空格，间接媒体查询方式
      eg.  @import url("css/XXX.css") all and (max-width:800px);    条件符合后在链接CSS文件


响应式布局典型 Demo —— HTML部分




      首先，新建一个HTML 文件，命名Demo.html. 接着，新建一个CSS文件，文件名与HTML文件相同，Demo.css
在HTML文件，head标签中引入viewport视口功能，如下：


<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />   这是移动开发过程中必要语句


接着，将HTML文件与CSS文件关联  ：<link rel="stylesheet" type="text/css" href="css/Demo.css"/>


在HTML文件，body标签中写入结构语句：




<body>

    <header id="header">

        <ul>

            <li>header1</li>

            <li>header2</li>

            <li>header3</li>

            <li>header4</li>

            <li>header5</li>

            </ul>

        <div>

            icon

        </div>

    </header>

    <section id="main">

        <div class="left">

            left

        </div>

        <div class="center">

            center

        </div>

        <div class="right">

            right

        </div>

    </section>

    <footer id="foot">

        footer

    </footer>

</body>





响应式布局典型 Demo —— CSS部分




首先，在PC端我想实现如下效果，显示header1-5导航栏，隐藏右上角小div：




在CSS文件中，我先写入PC端的CSS样式，在PC端的基础上进行pad、手机端的更改，代码如下：




*{           /*    使用通用选择器进行整体共有样式设置 */

    margin: 0px;

    padding: 0px;

    font-size: 48px;

    text-align: center;

    box-sizing: border-box;

}

#header,

#main,        /*给头部/主体/底部同时设置宽/高/背景色, 水平垂直居中 */

#foot{

    height: 100px;

    width: 1200px;

    background-color: pink;

    line-height: 100px;

    margin: 0 auto;

    min-width: 300px;

}

#header ul{

    width: 80%;

}

#header ul li{

    float: left;

    width: 20%;

    list-style: none;

    font-size: 20px;

}

#header div{

  /* li 全部浮动,父盒子ul塌陷,相当于不存在了，div才能浮动到ul右侧*/

    display: none;

    width: 50px;

    height: 50px;

    background-color: yellow;

    float: right;

    line-height: 50px;

    font-size: 20px;

    margin-top: 25px;

    margin-right: 25px;

}

#main{

    height: 520px;      /* 给主体设置高度/文字垂直居中/上下边框*/

    line-height: 520px;

    border-bottom: 10px solid white;

    border-top: 10px solid white;

}
/* 将主体分成三部分,左:中:右=1:2:1 分别设置不同背景色 浮动*/

#main .left{

    width: 25%;

    height: 500px;

    background-color: greenyellow;

    float: left;

}

#main .center{

    width: 50%;

    height: 500px;

    background-color: orange;

    border-right: 10px solid white;

    border-left: 10px solid white;

    float: left;

}

#main .right{

    width: 25%;

    height: 500px;

    background-color: paleturquoise;

    float: left;

}




接下来，进行响应式的设置，我直接在CSS中引入媒体查询。


然后是Pad端（假设屏幕最大宽度900px），主体右端隐藏，类似于新浪微博的显示方式，有兴趣的可以看看，效果图如下：




CSS样式如下：




@media  screen and (max-width: 1200px) {     /* PC端头部/主体/底部宽度100%显示*/

    #header,

    #main,

    #foot{

        width: 100%;

    }

}

 /*pad端主体只显示左:中近似=1:2,center左边有border部分，右border隐藏*/

@media  screen and (max-width:900px ) {

    #main .right{

        display: none;

    }

    #main .left{

        width: 35%;

    }

    #main .center{

        width: 65%;

        border-right: hidden;

    }

}




最后是手机端(假设最大宽度550px)，我想实现的效果是header1-5导航栏隐藏，右侧小div显示，主体部分的左中右改为上中下显示，显示效果如下：




手机端CSS样式代码如下：




  /*手机端整体高度增大,主体左中右浮动取消, 宽度都为100%*/

@media  screen and (max-width: 550px) {

    #main{

        height: 920px;

    }

    #main .left{

        float: none;

        width: 100%;

        height: 250px;

        line-height: 250px;

    }

  /* center左右border改为上下border,为了不挤压内容（IE盒子）,主体总宽度加20px*/

    #main .center{

        float: none;

        width: 100%;

        height: 400px;

        line-height: 400px;

        border-left: hidden;

        border-bottom: 10px solid white;

         border-top: 10px solid white;

    }

    #main .right{          /*主体右端重新显示*/

        display: block;

        float: none;

        width: 100%;

        height: 250px;

        line-height: 250px;

    }

}

    #header ul{       /*头部导航栏ul隐藏,右上角小div由隐藏改为显示  */

        display: none;

    }

    #header div{

        display: block;

    }




到这里 我的响应式布局就介绍完了，是不是很神奇，很有趣，也很容易理解呢？


喜欢请收藏呦~


 
												


											
响应式布局 —— Demo的更多相关文章
	

    
								
  1. 响应式布局（Responsive layout，RL）的简单Demo
		
          ★背景:       响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决 ...
    
		
    2. 
						
  2. 移动Web之响应式布局的探讨
		
    响应式布局的探讨 响应式布局的两种方式 基于百分比的布局 例:Bootstrap 基于rem的布局 例:淘宝触屏版 这两种布局都需要依赖于CSS3的media query来设置布局断点(或者通过js监 ...
    
		
    3. 
						
  3. HTML5 respond.js 解决IE6~8的响应式布局问题
		
    HTML5 respond.js 解决IE6~8的响应式布局问题   响 应式布局,理想状态是,对PC/移动各种终端进行响应.媒体查询的支持程度是IE9+以及其他现代的浏览器,但是IE8在市场当中仍然 ...
    
		
    4. 
						
  4. html5/css3响应式布局介绍及设计流程
		
    html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局 ...
    
		
    5. 
						
  5. 响应式布局：Flexbox应用总结
		
    距离上篇文章<布局神器:Flexbox>的发表已有一周时间,转眼这周又到了周五(O(∩_∩)O~~): 习惯性在周五对自己的一周工作进行下总结,记录下这周值得被纪念的工作事件,无论是好的, ...
    
		
    6. 
						
  6. JGUI源码：响应式布局简单实现(13)
		
    首先自我检讨下,一直没有认真研究过响应式布局,有个大致概念响应式就是屏幕缩小了就自动换行或者隐藏显示,就先按自己的理解来闭门造车思考实现过程吧. 1.首先把显示区域分成12等分,bootstrap是这 ...
    
		
    7. 
						
  7. 【css】响应式布局入门【转】
		
    最近研究响应式设计框架的时候,发现网上很多相关的属性介绍,却很少有系统的入门级使用的文章,我自己整理了一篇入门知识,并没有什么高深的理论,也不牵扯到框架. 目前已经越来越多的站点以及wap站点使用响应 ...
    
		
    8. 
						
  8. 移动web之响应式布局
		
    1.响应式布局的概念 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念.简而言之.就是一个站点可以兼容多个终端--而不是为每一个终端做一个特定的版本号. 这个概念是为解决移动互 ...
    
		
    9. 
						
  9. html自己写响应式布局（说起来很高大上的样子，但是其实很简单）
		
    第一步,打开电脑中安装的Sublime Text3,新建demo文件夹用来存放文件,在里面新建一个HTML文件,通过Tab快捷键迅速创建一个HTML模板,并命名标题. 第二步,在Body标签里添加三个 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 【Android Developers Training】 63. 定义形状
			
    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
    
			
    2. 
						
  2. 短信发送接口被恶意访问的网络攻击事件(四)完结篇--搭建WAF清理战场
			
    前言 短信发送接口被恶意访问的网络攻击事件(一)紧张的遭遇战险胜 短信发送接口被恶意访问的网络攻击事件(二)肉搏战-阻止恶意请求 短信发送接口被恶意访问的网络攻击事件(三)定位恶意IP的日志分析脚本  ...
    
			
    3. 
						
  3. maven(二) maven项目构建ssh工程(父工程与子模块的拆分与聚合)
			
    前一节我们明白了maven是个什么玩意,这一节就来讲讲他的一个重要的应用场景,也就是通过maven将一个ssh项目分割为不同的几个部分独立开发,很重要,加油 --WH 一.maven父工程与子模块的拆 ...
    
			
    4. 
						
  4. javaScript事件绑定
			
    事件绑定,就是要对某一个东西进行操作.(因为你想让他实现什么效果,所以就得绑定他,哈哈哈!) 要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函 ...
    
			
    5. 
						
  5. vijos1027题解
			
    题目: 当大家在考场中接受考验(折磨?)的时候,小呆正在悠闲(欠扁)地玩一个叫"最初梦想"的游戏.游戏描述的是一个叫pass的有志少年在不同的时空穿越对抗传说中的大魔王chines ...
    
			
    6. 
						
  6. oracle预定义角色
			
    角色是相关权限的集合,使用角色能够简化权限的管理.简而言之就是oracle可以事先把一系列权限集中在一起(角色),打包赋予给用户,那么用户就具有了角色的一系列权限. oracle预定义角色有25种,它 ...
    
			
    7. 
						
  7. js&jquery跨域详解jsonp，jquery并发大量请求丢失回调bug
			
    URL  说明 是否允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.js http:/ ...
    
			
    8. 
						
  8. git合并历史提交
			
    背景 以前一直觉得只要pull和push就够了,但合作中总会遇到各种非理想的情况.这时候才发现git其他命令的作用. 现在的情况是,repo是一个远程team维护的,我们需要增加新feature,那么 ...
    
			
    9. 
						
  9. Java项目集成SAP BO
			
    SAP BO报表查看需要登录SAP BO系统,为了方便公司希望将BO报表集成到OA系统中,所以参考网上资料加上与SAP BO的顾问咨询整理出一套通过Java来集成SAP BO的功能. SAPBO中的报 ...
    
			
    10. 
						
  10. 初涉算法——C++
			
    一.sstream头文件运用 题目:输入数据的每行包括若干个(至少一个)以空格隔开的整数,输出每行中所有整数之和. #include<iostream> #include<cstri ...
    
			
    11.