1.CSS 来实现响应式

CSS实现响应式网站的布局要用到的就是CSS中的媒体查询接下来来简单介绍一下：

  • @media 类型 and (条件1) and (条件二){css样式}
  • <link rel="stylesheet" type="text/css" href="css/demo.css" media=“all and (max-width=980px)”/>

我们只需用到width衍生出的max-width这个属性，定义输出设备中的页面可见区域宽度来控制该改变的样式即可。
html代码如下：

<!doctype html>

<html>

<head>

    <meta charset="utf-8"/>

    <title>响应式</title>

    <link rel="stylesheet" type="text/css" href="demo01.css" media="screen and (min-width:1024px)"/>

    <link rel="stylesheet" type="text/css" href="demo03.css" media="screen and (max-width:1024px) and (min-width:450px)"/>

    <link rel="stylesheet" type="text/css" href="demo02.css" media="screen and (max-width:450px)"/>

</head>

<body>

    <div class="header">

        头部

    </div>

    <div class="container clearfix">

        <div class="left">左部</div>

        <div class="center">中部</div>

        <div class="right">右部</div>

    </div>

    <div class="footer">底部</div>

</body>

</html>

demo01.css样式如下：

body{

    margin:0;

    text-align:center;

}

.header{

    height:100px;

    background-color:red;

}

.container{

    height:400px;

    background-color:pink;

}

.clearfix:after{

    display:block;

    content:"";

    visibility:hidden;

    height:0;

    clear:both;

}

.footer{

    height:100px;

    background-color:blue;

}

.left{

    width:20%;

    background-color:orange;

    float:left;

    height:300px;

}

.center{

    width:55%;

    background-color:gray;

    float:left;

    height:300px;

    margin:0 2.5%;

}

.right{

    width:20%;

    background-color:yellow;

    float:left;

    height:300px;

}

demo02的样式如下：

body{

    margin:0;

    text-align:center;

}

.header{

    height:100px;

    background-color:red;

}

.container{

    height:400px;

    background-color:pink;

}

.clearfix:after{

    display:block;

    content:"";

    visibility:hidden;

    height:0;

    clear:both;

}

.footer{

    height:100px;

    background-color:blue;

}

.left{

    width:30%;

    background-color:orange;

    float:left;

    height:300px;

}

.center{

    width:70%;

    background-color:gray;

    float:left;

    height:300px;

}

.right{

    width:100%;

    background-color:yellow;

    height:300px;

}

demo03的样式：

body{

    margin:0;

    text-align:center;

}

.header{

    height:100px;

    background-color:red;

}

.container{

    background-color:pink;

}

.clearfix:after{

    display:block;

    content:"";

    visibility:hidden;

    height:0;

    clear:both;

}

.footer{

    height:100px;

    background-color:blue;

}

.left{

    width:100%;

    background-color:orange;

    height:300px;

}

.center{

    width:100%;

    background-color:gray;

    height:300px;

}

.right{

    width:100%;

    background-color:yellow;

    height:300px;

}

效果图：

窗口大于1024px时显示的样子

当大于640小于980时，右侧栏在底部

当小于480时，导航栏折叠，body三部分竖直排列显示，若窗口持续缩小，不在发生变化，区域被压缩

效果总图：

持续更新，欢迎大家！

css 响应式（媒介查询）的更多相关文章

  1. (原)css 响应式媒体查询 模板

    @media only screen and (max-width:340px) { html,input{ font-size:80%; } } @media only screen and (ma ...

  2. CSS响应式布局到底是什么？

    响应式布局是最近几年在前端开发中非常火热的词,它是相对于固定像素大小的网页而言的,那么CSS响应式布局到底是什么?顾名思义,响应式布局就是网页能够响应各种各样不同分辨率大小的设备,能够将网页很好的呈献 ...

  3. css - 响应式

    css - 响应式 移动设备尺寸 移动设备的尺寸各不相同,大体上可以做如下划分: 768px以下的是手机屏幕 768px-991px是平板ipad屏幕 992px-1199是大平板屏幕 1200极其以 ...

  4. html响应式布局，css响应式布局，响应式布局入门

    html响应式布局,css响应式布局,响应式布局入门 >>>>>>>>>>>>>>>>>>& ...

  5. Bulma CSS - 响应式

    Bulma CSS框架教程 Bulma CSS – 简介 Bulma CSS – 开始 Bulma CSS – CSS类 Bulma CSS – 模块化 Bulma CSS – 响应式 Bulma是一 ...

  6. css响应式布局RWD

    响应式布局结合了三大理念: 1)用于布局的弹性网络(百分比定义宽度) 2)用于图片和视频的弹性媒体 3)媒体查询 在布局中,需要注意的点有: 1)尽量用min-width/max-width,max- ...

  7. CSS 响应式设计

    响应式设计是指在不同分辨率的设备中,网页布局可以自适应的调整.这种弹性化的布局使网站在不同设备中的布局都比较合理,可以为不同终端的用户提供更加舒适的界面和更好的用户体验,其根本理念是使原本 PC 上的 ...

  8. Bootstrap的介绍和响应式媒体查询

    Bootstrap的介绍 凡是使用过Bootstrap的开发者,都不在乎做这么两件事情:复制and粘贴.哈哈~,是的使用Bootstrap非常简单,但是在复制粘贴之前,需要先对Bootstrap的用法 ...

  9. css响应式设计

    响应式设计是指在不同分辨率的设备中,网页布局可以自适应的调整.这种弹性化的布局使网站在不同设备中的布局都比较合理,可以为不同终端的用户提供更加舒适的界面和更好的用户体验,其根本理念是使原本 PC 上的 ...

随机推荐

  1. 使用java语言实现一个队列（两种实现比较）（数据结构）

    一.什么是队列,换句话说,队列主要特征是什么? 四个字:先进先出 六个字:屁股进,脑袋出 脑补个场景:日常排队买饭,新来的排在后面,前面打完饭的走人,这就是队列: OK,思考一个问题,我为什么写了两种 ...

  2. unity项目中使用BUGLY遇到的的几个问题

    1,第一次对外测试中,发现某些机型游戏中卡死了,但bugly上没报错.后来发现是我们的代码使用 try catch把异常捕获了但什么都没做. 2,别人家项目的bugly上报都能显示出文件和代码行,我们 ...

  3. ASM磁盘组删除磁盘

    ASM磁盘组删除磁盘 [oracle@dbserver1 ~]$ su - gridsqlplus / as sysasmConnected.SQL> alter diskgroup data ...

  4. 图论&线性基（?）(8.12)

    边没有负权,最短路最多只有n条边 很暴力的思想: 先跑一遍最短路,找出最短路上的边,枚举每条边,翻倍,放进原图再跑一遍.取最大值 好熟悉啊 分层建图,建k层 每层内部是原图 若原图中u到v有连边,则由 ...

  5. python实现格式化输出9*9乘法表

    # python 9*9 乘法表 for i in range(1,10): for j in range(1,i+1): print("%s*%s=%s"%(i,j,i*j),e ...

  6. 001-spring boot概述与课程概要

    一.Spring Boot介绍 Spring Boot的目的在于创建和启动新的基于spring框架的项目.Spring boot会选择最适合的Spring 子项目和第三方开源库进行整合.大部分Spri ...

  7. SVN 客户端不显示图标解决方案

    下图为没有设置之前,文件夹不显示svn图标 SVN客户端不显示图标解决方案:右键svn->设置->图标覆盖->状态缓存选择"Windows外壳"->确定,刷 ...

  8. 《图解设计模式》读书笔记7-1 facade模式

    目录 1. Facade模式简介 2. 示例程序 2.1 类图 2.2 程序 3.角色和类图 4.思路拓展 1. Facade模式简介 开发程序的过程中,随着时间的推移,类会越来越多,调用关系会越来越 ...

  9. HttpServletRequest中的request.setAttribute()和request.getSession().setAttribute()

    request.setAttribute("num",value):有效范围是一个请求范围,不发送请求的界面无法获取到value的值,jsp界面获取使用EL表达式${num}:re ...

  10. [19/05/08-星期三] JDBC(Java DataBase Connectivity)_ORM(Object Relationship Mapping， 对象关系映射)

    一.概念 基本思想: – 表结构跟类对应: 表中字段和类的属性对应:表中记录和对象对应: – 让javabean的属性名和类型尽量和数据库保持一致! – 一条记录对应一个对象.将这些查询到的对象放到容 ...