用CSS实现响应式布局

响应式布局感觉很高大上，很难，但实际上只用CSS也能实现响应式布局
要用的就是CSS中的没接查询，下面就介绍一下怎么运用：

使用@media 的三种方法

1.直接在CSS文件中使用：

@media 类型 and (条件1) and (条件二){

    css样式

}

@media screen and (max-width:1024px) {

    body{

        background-color: red;

    }

}

2.使用@import导入

@import url("css/moxie.css") all and (max-width:980px);

3.也是最常用的方法--直接使用link连接，media属性用于设置查询方法

<link rel="stylesheet" type="text/css" href="css/moxie.css" media=“all and (max-width=980px)”/>

下面是一个简单的响应式的布局HTMl代码：

<!doctype html>

<html>

<head>

    <meta charset="utf-8"/>

    <title>响应式</title>

    <link rel="stylesheet" type="text/css" href="index.css"/>

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

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

</head>

<body>

    <div class="header">头部</div>

    <div class="main clearfix">

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

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

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

    </div>

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

</body>

</html>

下面是CSS样式：

*{

    margin:0;

    padding:0;

    text-align:center;

    color:yellow;

}

.header{

    width:100%;

    height:100px;

    background:#ccc;

    line-height:100px;

}

.main{

    background:green;

    width:100%;

}

.clearfix:after{

    display:block;

    height:0;

    content:"";

    visibility:hidden;

    clear:both;

}

.left,.center,.right{

    float:left;

}

.left{

    width:20%;

    background:#112993;

    height:300px;

    font-size:50px;

    line-height:300px;

}

.center{

    width:60%;

    background:#ff0;

    height:400px;

    color:#fff;

    font-size:50px;

    line-height:400px;

}

.right{

    width:20%;

    background:#f0f;

    height:300px;

    font-size:50px;

    line-height:300px;

}

.footer{

    width:100%;

    height:50px;

    background:#000;

    line-height:50px;

}

<link rel="stylesheet" type="text/css" href="index01.css" media="screen and (max-width:1024px) and (min-width:720px)"/>样式代码

.right{

    float:none;

    width:100%;

    background:#f0f;

    clear:both;

}

.left{

    width:30%;

}

.center{

    width:70%;

}

.main{

    height:800px;

}

<link rel="stylesheet" type="text/css" href="index02.css" media="screen and (max-width:720px)"/>样式代码

.left,.center,.right{

    float:none;

    width:100%;

}

当窗口大于1024px 时，指挥被压缩，并不会发生其他变化：

当窗口小于1024px，大于720px的时候，右侧栏取消浮动，在下边显示：

当窗口小于720px的时候，左中右三栏，全都取消浮动，宽度100%：

好了，布局就这么简单，细节的把握还靠不断地练习。

持续更新，欢迎大家指教

CSS实现响应式布局的更多相关文章

  1. Responsive Web CSS – 在线响应式布局创建器

    如果您已经使用了 CSS 或前端框架,创建响应式布局应该不难. 然而,如果你刚涉足这类布局,Responsive Web CSS 可以帮助你快速上手. 这是一个基于 Web 的工具,使任何人都可以通过 ...

  2. 用CSS实现响应式布局

    响应式网页看起来高大上,但实际上,不用JS只用CSS也能实现响应式网站的布局 要用到的就是CSS中的媒体查询下面来简单介绍一下怎么运用 使用@media 的三种方式 第一: 直接在CSS文件中使用 @ ...

  3. css实现响应式布局的相关内容

    所以我就在做自适应的时候查了一些资料 首先我发现一个问题:有响应式布局和自适应布局两种布局效果 简单来说,响应式布局就是不同的设备无论大小 布局都自动调整大小 页面布局都一样 可以保证无论什么设备 用 ...

  4. 【css】响应式布局入门【转】

    最近研究响应式设计框架的时候,发现网上很多相关的属性介绍,却很少有系统的入门级使用的文章,我自己整理了一篇入门知识,并没有什么高深的理论,也不牵扯到框架. 目前已经越来越多的站点以及wap站点使用响应 ...

  5. CSS的响应式布局

    响应式布局是什么 它是相对于固定像素大小的网页而言的,顾名思义,响应式布局就是网页能够响应各种各样不同分辨率大小的设备,能够将网页很好的呈献给用户. 如何实现响应式布局? 1.CSS3@media查询 ...

  6. css的响应式布局和动画

    把响应式布局和动画放在一起写是因为他们有个共同点@符号 先讲讲响应式布局@media 响应式布局==曾经==非常的流行,这种布局方式可以做出一也兼容一切设备的页面,但是当页面的功能越来越多,css文件 ...

  7. CSS实现响应式布局(自动拆分几列)

    1.css代码 <style type="text/css"> .container{ margin-top: 10px; } .outerDiv{ float:lef ...

  8. css中响应式布局中样式的代码书写方法

    代码示例:@media only screen and (min-width: 320px){ html { font-size: 8px !important; } .mulu-zi{ positi ...

  9. 关于bootstrap和响应式布局

    bootstrap导入 首先需要安装好插件 然后就是在代码器写导入代码 代码如下 <html lang="zh-CN"> <head> <meta c ...

随机推荐

  1. 吴裕雄--天生自然C语言开发：enum(枚举)

    enum DAY { MON=, TUE, WED, THU, FRI, SAT, SUN }; enum DAY { MON=, TUE, WED, THU, FRI, SAT, SUN }; en ...

  2. java word另存为word xml格式

    1.jacob-1.15-M3-x86.dll copy到c:\\windows\system32 2.引入jacob.jar 把jacob.dll(不同版本的jacob的dll文件名有所不同)复制到 ...

  3. bzoj 3450 Tyvj1952 Easy (概率dp)

    3450: Tyvj1952 Easy Description 某一天WJMZBMR在打osu~~~但是他太弱逼了,有些地方完全靠运气:(我们来简化一下这个游戏的规则有n次点击要做,成功了就是o,失败 ...

  4. CAS 5.3.x 相关信息

    CAS 5.3.x 相关信息 单点登录系统 学习网站: https://www.apereo.org/projects/cas 官方网站 https://github.com/apereo/cas-o ...

  5. 吴裕雄--天生自然PYTHON学习笔记：python自动登录网站

    打开 www. 5 l eta . com 网站,如果己经通过某用户名进行了登录,那么先退出登录 . 登录该网站 的步骤一般如下 : ( 1 )单击右上角的“登录”按钮. ( 2 )先输入账号. ( ...

  6. cs231n spring 2017 lecture2 Image Classification

    1. 相比于传统的人工提取特征(边.角等),深度学习是一种Data-Driven Approach.深度学习有统一的框架,喂不同的数据集,可以训练识别不同的物体.而人工提取特征的方式很脆弱,换一个物体 ...

  7. CentOS 5.5 --学习（1）

    一.解决浏览器乱码问题: 用yum 安装 yum  -y  install  fonts-chinese yum  -y  install  fonts-ISO8859-2-75dpiCentOS系统 ...

  8. 如果你有一个域名，你也可以免费有一个diy@yourdomain.com的企业邮局

    如果你有一个域名,例如:www.bengou.net那么你可以拥有一个免费邮箱:lajiyoujian@bengou.net.那么什么是企业邮局呢?有啥优点 企业邮局是指以您的域名作为后缀的电子邮件地 ...

  9. SVN 常用资源

    常用命令 将文档checkout到本地目录 svn checkout path(path是服务器上的目录) svn checkout svn://192.168.1.1/pro/domain svn ...

  10. 德国、日本的制造业为什么不能完全执行SOP？

    在过去几十年,德国.日本的制造企业简直就是"以质取胜"的代名词,一些制造业的CEO非常自豪,甚至在公开场合调侃:大家好,我就是"保质保量"本人,也正因如此,德国 ...