用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. ionic3 发布订阅者模式实现

    在ionic3 中实现订阅发布模式,需要用到Events. Events下面有三个方法 events.subscribe()  订阅 events.publish()  发布 events.unsub ...

  2. dom4j 为生成 XML 的文件添加 xmlns（命名空间） 属性

    dom4j 为生成 XML 的文件添加 xmlns(命名空间) 属性 分类: Java2011-06-03 16:14 976人阅读 评论(0) 收藏 举报 xml扩展语言 今天在开发sitemap地 ...

  3. VS制作dll、def文件的使用、dll加入工程使用

    1.VS新建工程,在选项的时候,选择dll和空项目,保持干净的dll库: 创建完以后,添加头文件以及源文件. 2.将外部模块使用的接口导出: (1)函数导出: __declspec(dllexport ...

  4. php获取mysql大小

      查看指定数据库大小:  SELECT sum(DATA_LENGTH)+sum(INDEX_LENGTH) FROM information_schema.TABLES where    TABL ...

  5. yaml文件的格式

    后缀为.yml    格式一般就是key:空格 value    这里的value可以是 普通数据(数字,字符串)   ---------------------------------------- ...

  6. excle导出、导入、下载_jeesite注解@ExcelField

    介绍:对Apache POI 3.9的简单封装,实现Excel的导出导入功能.使用Annotation定义导出导入字段. 优点:1.简单易用,支持大数量导出,配置简单,代码量少. 2.支持Excel ...

  7. asp.net---jquery--ajax 实现滚动条滚动到底部分页显示

    前台:aspx页面 var bgtime = $(" #date1 ").val(); var overtime = $(" #date2 ").val(); ...

  8. hdu5452

    http://acm.hdu.edu.cn/showproblem.php?pid=5452 题意:给个图T(图G的最小生成树),然后再给定图G的剩余边,问你从图T中当且割一条边的情况再割图G中不属于 ...

  9. Differential Calculus

    Taylor's Formula Theorem 1.1. Let \(f\): \(I=(c,d)->\mathbb{R}\) be a n-times differentiable func ...

  10. cs231n spring 2017 lecture11 Detection and Segmentation

    1. Semantic Segmentation 把每个像素分类到某个语义. 为了减少运算量,会先降采样再升采样.降采样一般用池化层,升采样有各种“Unpooling”.“Transpose Conv ...