响应式布局实例演示

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. Spring Boot 快速入门(一)
			
    简介  相信很多人都接触spring框架很长时间了,每次搭建spring框架的时候都需要配置好多的jar.xml,做很多繁琐重复的配置,稍微不留神就会出现各种各样的问题,每次调试真的是香菇.蓝瘦啊.  ...
    
			
    2. 
						
  2. MATLAB命令大全和矩阵操作大全
			
    转载自: http://blog.csdn.net/dengjianqiang2011/article/details/8753807 MATLAB矩阵操作大全 一.矩阵的表示在MATLAB中创建矩阵 ...
    
			
    3. 
						
  3. SequoiaDB版本在线升级介绍说明
			
    1.前言 在SequoiaDB数据库发展过程中,基本保持每半年对外发行一个正式的Release版本.并且每个新发布的Release版本相对老版本而言,性能方面都有很大的提高,并且数据库也会在新版本中加 ...
    
			
    4. 
						
  4. （转载）Oracle10g 数据泵导出命令 expdp 使用总结(三)
			
    原文链接:http://hi.baidu.com/edeed/item/19aa0df856da3e19a6298894 Oracle10g 数据泵导出命令 expdp 使用总结(一) 14. JOB ...
    
			
    5. 
						
  5. vue.js 组件之间传递数据
			
    前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一. 组件 组件与组件之间,还存在着不同的关 ...
    
			
    6. 
						
  6. mongoDB 学习笔记纯干货（mongoose、增删改查、聚合、索引、连接、备份与恢复、监控等等）
			
    最后更新时间:2017-07-13 11:10:49 原始文章链接:http://www.lovebxm.com/2017/07/13/mongodb_primer/ MongoDB - 简介 官网: ...
    
			
    7. 
						
  7. Lucene的使用与重构
			
    忽然一想好久不写博客了,工作原因个人原因,这些天一直希望一天假如36个小时该多好,但是,假如不可能. 由于近期在项目中接触了lucene,这个已经没有人维护的全文搜索框架,确实踩了不少坑,为什么用lu ...
    
			
    8. 
						
  8. PLC编程算法
			
    PLC编程算法(一) 01 开关量也称逻辑量,指仅有两个取值,0或1.ON或OFF.它是最常用的控制,对它进行控制是PLC的优势,也是PLC最基本的应用. 开关量控制的目的是,根据开关量的当前输入组合 ...
    
			
    9. 
						
  9. 在Linux安装配置Tomcat 并部署web应用 ( 三种方式 )
			
    系统版本:centos6.5版本 java版本:1.7 一.准备工作 1.java -version 检查是否有java环境,没有则需要去安装并配置到环境变量中. 2.下载tomcat包,下载地址:h ...
    
			
    10. 
						
  10. RecyclerView线性分割线
			
    由于recyclerview默认是没有分割线的,需要显示分割线的话,可以在布局里添加一条有背景色的View标签,或者通过ItemDecoration来实现,本文以后者为例. ItemDecoratio ...
    
			
    11.