响应式布局实例演示

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. window.onload的加载和$(document).read()
			
    1.执行时机: window.onload :必须等到网页中所有的内容加载完之后才执行. $(document).read():网页中所有的DOM结构执行完毕后.可能DOM元素并未加载完. 2.单个网 ...
    
			
    2. 
						
  2. Java自学手记——多态
			
    对象转型 学习多态前先明白一个叫对象转型的概念,如: class Animal{ void sleep(){ System.out.println("睡觉"); } } class ...
    
			
    3. 
						
  3. PhpStorm配置PHP解释器（wampServer版）
			
    PHPStorm(以下简称为PS)和wampServer集成环境安装简单,不再赘述. 本人使用PhpStrom版本为2017.1.4版本. PS刚开始使用会使用自带服务器,但是有几率不能自动匹配到PH ...
    
			
    4. 
						
  4. Hibernate  集合映射 一对多多对一 inverse属性 +  cascade级联属性  多对多 一对一 关系映射
			
    1 . 集合映射 需求:购物商城,用户有多个地址. // javabean设计 // javabean设计 public class User { private int userId; privat ...
    
			
    5. 
						
  5. c#编程-线程同步
			
    线程同步 上一篇介绍了如何开启线程,线程间相互传递参数,及线程中本地变量和全局共享变量区别. 本篇主要说明线程同步. 如果有多个线程同时访问共享数据的时候,就必须要用线程同步,防止共享数据被破坏.如果 ...
    
			
    6. 
						
  6. JavaScript创建对象的方法
			
    显示在浏览器中的控制台中. <script type="text/javascript"> //这个工厂方法返回一个新的"范围对象" functio ...
    
			
    7. 
						
  7. .NET平台的ORM分析工具
			
    众所周知,“ORM”和“性能问题”常常一起出现.ORM通过对开发人员隐藏SQL细节可以大大的提高生产力.然而,它们很容易产生一些未被发现的荒谬查询.通常情况下,数据库管理员可以通过交叉引用有问题的存储 ...
    
			
    8. 
						
  8. Android系统--输入系统（十五）实战_使用GlobalKey一键启动程序
			
    Android系统--输入系统(十五)实战_使用GlobalKey一键启动程序 1. 一键启动的过程 1.1 对于global key, 系统会根据global_keys.xml发送消息给某个组件 & ...
    
			
    9. 
						
  9. Luogu 2245 星际导航（最小生成树，最近公共祖先LCA，并查集）
			
    Luogu 2245 星际导航(最小生成树,最近公共祖先LCA,并查集) Description sideman做好了回到Gliese 星球的硬件准备,但是sideman的导航系统还没有完全设计好.为 ...
    
			
    10. 
						
  10. 增强for循环赋值
			
    增强for循环赋值 代码如下: double[] testList01 = new double[5]; java.util.Scanner sc = new java.util.Scanner(Sy ...
    
			
    11.