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. IDEA简单破解激活操作流程（我在用的）

    其实简单的,你需要下一个包,将他放入你的IDEA安装目录的bin下,如下下图 下载地址:https://pan.baidu.com/s/1aJDefDGmfYGrkcJCpZYccA 看到红线的地方了 ...

  2. 利用 TensorFlow 入门 Word2Vec

    利用 TensorFlow 入门 Word2Vec 原创 2017-10-14 chen_h coderpai 博客地址:http://www.jianshu.com/p/4e16ae0aad25 或 ...

  3. CentOS6.5/7安装配置Samba

    CentOS6.5安装配置Samba 本文的场景是虚拟机运行CentOS6.,本机是Win7,现欲把CentOS上的一个文件夹共享出来,Win的机器可以读写. Samba与window连接需要使用Ne ...

  4. 转：KVM使用NAT联网并为VM配置iptables端口转发，kvmiptables

    转载地址:https://www.ilanni.com/?p=7016 在前面的文章中,我们介绍KVM的虚拟机(以下简称VM)都是通过桥接方式进行联网的. 本篇文章我们来介绍KVM的VM通过NAT方式 ...

  5. centos6最小化安装默认没有 NetworkManager服务

    转载Centos6最小化安装中设置网卡默认启动   Centos 6.0版本提供了一个"最小化"(Minimal)安装的选项.这是一个非常好的改进,因为系统中再也不会存在那些不必要 ...

  6. C# winform 键盘全局事件

    本文转载自:http://www.cnblogs.com/yukaizhao/archive/2010/12/14/winform_keyup.html 在winform程序中给form添加了keyu ...

  7. 007-elasticsearch5.4.3【一】概述、Elasticsearch 访问方式、Elasticsearch 面向文档、常用概念

    一.概述 Elasticsearch 是一个开源的搜索引擎,建立在一个全文搜索引擎库 Apache Lucene™ 基础之上. Elasticsearch 也是使用 Java 编写的,它的内部使用 L ...

  8. tensorflow和keras的安装

    1 卸载tensorflow方法,在终端输入:  把protobuf删除了才能卸载干净. sudo pip uninstall protobuf sudo pip uninstall tensorfl ...

  9. C# Thread2——线程优先级

    C#中Thread的优先级不是决定每个线程被执行顺序.它决定了线程可以占用CPU的时间 Thread的优先级设置是自带的枚举类型"ThreadPriority" [ComVisib ...

  10. 【Linux】limits.conf 不重启就生效或者不生效的原因

    前阵子,我要用到使LInux的文件打开数为65534个,而且需要永久生效,于是将配置写到了: vim /etc/security/limits.conf * soft nofile 65534* ha ...