响应式布局实例演示

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. 用超链接a来提交form表单
			
    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
    
			
    2. 
						
  2. Mybatis传参方式
			
    Mybatis传多个参数(三种解决方案) 据我目前接触到的传多个参数的方案有三种. 第一种方案  DAO层的函数方法 ? 1 Public User selectUser(String name,St ...
    
			
    3. 
						
  3. 深入理解Java虚拟机-----------虚拟机类加载机制
			
    虚拟机类加载机制 类从被加载到虚拟机内存开始,到卸载出内存为止,整个生命周期包括:加载,验证,准备,解析,初始化,使用,卸载等7个阶段.其中,验证,准备,解析3个部分称为连接. 以上7个阶段中,加载, ...
    
			
    4. 
						
  4. jsp登陆页面验证码在火狐浏览器不能刷新问题处理方案
			
    jsp登陆页面在火狐浏览器验证码不能刷新问题处理方案: <img src="YzmServlet" onClick="this.src='YzmServlet?ti ...
    
			
    5. 
						
  5. vue.js 组件之间传递数据
			
    前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一. 组件 组件与组件之间,还存在着不同的关 ...
    
			
    6. 
						
  6. 快学Scala之特质
			
    一个Scala类可以继承多个特质(trait), 特质可能会要求使用它们的类支持某个特定特性, 与Java接口不同, Scala特质可以给出这些特质的缺省实现. 要点如下: Scala中类只能继承一个 ...
    
			
    7. 
						
  7. (cljs/run-at (JSVM. :all) "一次说白DataType、Record和Protocol")
			
    前言  在项目中我们一般会为实际问题域定义领域数据模型,譬如开发VDOM时自然而言就会定义个VNode数据类型,用于打包存储.操作相关数据.clj/cljs不单内置了List.Vector.Set和M ...
    
			
    8. 
						
  8. 《JavaScript高级程序设计》 --  基本概念（一）
			
    之前看过好几遍<JavaScript高级程序设计>这一书,但是始终没有完完整整的看过一遍.从现在开始我会把它完整的啃一遍,每章节都记录笔记,自己的心得,加油! 由于前三章的内容比较简单,因 ...
    
			
    9. 
						
  9. HTTP模拟工具【C#/Winform源码】、Json绑定TreeView控件、使用了MetroModernUI、RestSharp、Dapper.Net、Newtonsoft.Json、SmartThreadPool这几个主要开源框架
			
    HTTP模拟工具 开发语言:C#/Winform开发工具:Visual Studio 2017数据库:   SQLite使用框架:界面-MetroModernUI              Http请 ...
    
			
    10. 
						
  10. <经验杂谈>Mysql中字符串处理的几种处理方法concat、concat_ws、group_concat
			
    Mysql中字符串处理的几种处理方法concat.concat_ws.group_concat以下详情: MySQL中concat函数使用方法:CONCAT(str1,str2,-) 返回结果为连接参 ...
    
			
    11.