用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. SAP PM：通过接口获取设备资产基本信息

    在SAP工厂维护模块中,给设备贴二维码标签是现在越来越流行的做法.因此通过扫描二维码获取设备资产信息是个非常基本的需求. 以下实例简单实现了,给SAP RFC传入设备编码获取设备资产基本信息的需求. ...

  2. G - Green-Red Tree Gym - 102190G

    题目链接:http://codeforces.com/gym/102190/attachments 题解:我们先将前5个点分别涂上红色或者绿色,使得这两棵树在5个点中都是连通,并不存在自环(建边方式不 ...

  3. MyEclipse10安装properties文件插件

    安装步骤 1.下载PropertiesEditor插件 http://propedit.sourceforge.jp/index_en.html 2.解压出features.plugins文件 3.在 ...

  4. jmeter json乱码

    0 环境 系统环境:win7 1 操作 1 找到jmeter.properties 找到jmeter下的bin目录jmeter.properties文件 例如apache-jmeter-\bin\jm ...

  5. jenkins-定时跑代码

    build periodically和poll scm都可以定时运行

  6. OSI体系结构（七层）

    OSI体系结构,意为开放式系统互联.国际标准组织(国际标准化组织)制定了OSI模型.这个模型把网络通信的工作分为7层,分别是物理层.数据链路层.网络层.传输层.会话层.表示层和应用层. 1至4层被认为 ...

  7. cs231n spring 2017 lecture13 Generative Models

    1. 非监督学习 监督学习有数据有标签,目的是学习数据和标签之间的映射关系.而无监督学习只有数据,没有标签,目的是学习数据额隐藏结构. 2. 生成模型(Generative Models) 已知训练数 ...

  8. [LC] 142. Linked List Cycle II

    Given a linked list, return the node where the cycle begins. If there is no cycle, return null. To r ...

  9. 手机安装fiddler证书

    如果电脑浏览器和手机抓包有证书问题,那就把电脑的证书都删除,然后在fiddler里重置,手机上删除不了单个证书,可以重新下载一个证书安装 如果电脑抓包正常,手机抓包不正常,那就手机重新下载证书安装 手 ...

  10. Django环境的搭建以及最简示例

    一.环境的搭建 先安装pip yum install python-pip 安装失败: 安装epel扩展源 yum install epel-release 在安装pip 再利用pip安装django ...