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. Python发送邮件（常见四种邮件内容）

    Python发送邮件(常见四种邮件内容) 转载 2017年03月03日 17:17:04   转自:http://lizhenliang.blog.51cto.com/7876557/1875330 ...

  2. ajax传递json参数

    var pros = []; for(var i = 1; i <= 2; i++) { var obj = {}; obj.id = i; obj.age = i*20; pros = pro ...

  3. UVA 1380 A Scheduling Problem

    题目链接:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem ...

  4. 抓取某高校附近共享单车位置，并使用web方式展示过去几天的位置变化

    效果如图 使用了高德地图API:https://lbs.amap.com/api/javascript-api/example/marker/massmarks js代码如下: function Ma ...

  5. failed to create process ，pip报错问题

  6. 浅谈Java反射机制 之 使用类的 属性、方法和构造函数

    前面两篇我们总结了Java反射机制如何获取类的字节码,如何获取构造函数,属性和方法, 这篇我们将进一步验证如何使用我们获取到的属性.方法以及构造函数 1.使用 反射 获取到的 属性 import ja ...

  7. 20191105 《Spring5高级编程》笔记-第5章

    第5章 Spring AOP 面向切面编程(AOP)是面向对象编程(OOP)的补充.AOP通常被称为实施横切关注点的工具.术语横切关注点是指应用程序中无法从应用程序的其余部分分解并且可能导致代码重复和 ...

  8. Oracle的substr函数简单用法(转)

    转:http://www.cnblogs.com/nicholas_f/articles/1526063.html substr(字符串,截取开始位置,截取长度) //返回截取的字 substr('H ...

  9. 前端 CSS的选择器 基本选择器

    基本选择器包括: 标签选择器 类选择器 ID选择器 通用选择器 标签选择器 就是通过标签名来选择元素: 选中p标签 <!DOCTYPE html> <html lang=" ...

  10. vsphere虚拟化之Active Directory域的创建(一)

    1.搭建环境说明 本机是在Vmware Workstation 12 Pro虚拟软件下进行搭建的. 操作系统版本:Windows Server 2012 R2 简体中文企业版x64. 2.安装完win ...