响应式布局实例演示

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. template might not exist or might not be accessible by any of the configured Template Resolvers
			
    距离上一篇文章已经很长时间了,最近太忙碌了,今天发布spring boot遇到一个问题,找了好久才找到解决办法,今天贴出来和大家一起分享下,首先看错误信息 HTTP Status 500 - Requ ...
    
			
    2. 
						
  2. 【Android Developers Training】 41. 向另一台设备发送文件
			
    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
    
			
    3. 
						
  3. Http批量异步发送和数据保存
			
    先说需求. 有个服务程序定时扫描指定文件夹下一个所有文件,文件包含了多个用户(客户)信息及对应的http发送地址和发送数据.现在该服务程序需要提取这些用户信息,然后批量进行发送:发送完后需要将http ...
    
			
    4. 
						
  4. day4作业小代码练习
			
    登录模块: 我们无论上那个网站,经常遇到这样的情况,让我们登录这个网站,流程图如下: 思路: 1.当我们登录网站的时候,我们首先会输入用户名,这个时候,有些网站会提醒我们用户名是否存在,如果我们输入的 ...
    
			
    5. 
						
  5. C#  selecd,new,virtual,abstract与override
			
    本文大部分内容摘自  <.NET开发专家·亮剑.NET : .NET深入体验与实战精要> 博主只是搬运工,不喜勿喷. 关于虚方法,抽象类这一部分一直不是太清楚,目前的工作中也接触不到这些. ...
    
			
    6. 
						
  6. Kubernetes服务之“运行单实例的有状态服务”
			
    目标 在你的环境中创建一个PV 创建一个MySQl的Deployment 在集群中以DNS名称的方式,将MySQL暴露给其他的pod 开始之前 你需要一个Kubernetes集群,一个可以连接到集群的 ...
    
			
    7. 
						
  7. Mysql连接出错问题
			
    1.java 提示:java.lang.ClassNotFoundException: com.mysql.jdbc.Driver 处理:导入mysql-connector-java-5.1.7-bi ...
    
			
    8. 
						
  8. Luogu 1962 斐波那契数列（矩阵，递推）
			
    Luogu 1962 斐波那契数列(矩阵,递推) Description 大家都知道,斐波那契数列是满足如下性质的一个数列: f(1) = 1 f(2) = 1 f(n) = f(n-1) + f(n ...
    
			
    9. 
						
  9. java用户界面——加载图片 jpg GIF
			
    java用户界面--加载图片 jpg GIF 代码如下: package day08; import java.awt.GridLayout; import javax.swing.Icon;impo ...
    
			
    10. 
						
  10. Linux服务器下对Oracle作Rman备份
			
    由于工作需要,最近要对几台Linux系统下的Oracle数据库进行Rman备份,就在操作的同时,整理了一下,方便今后作为资料进行查阅. ------------------------Linux服务器 ...
    
			
    11.