用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. 如何编译（helloworld）可以在开发板上运行的应用

    本节介绍如何编译可以在开发板上运行的应用,编译方法很简单.基于:iTOP4412开发板首先要确定一下环境变量,如下图所示,使用“cd”命令回到根目录,然后使用命令“vim .bashrc”打开环境变量 ...

  2. rework-发出你的心声

    生意人虚张声势的时候会给人什么感觉?都是些僵硬的措辞.官方的腔调.虚伪的友善.法律术语等.你一定看过这些玩意儿,就好像是机器人写出来的东西,这些公司在向你发话,而不是和你对话. 这种专业主义面具让人觉 ...

  3. [HNOI2003]操作系统 优先队列用法

    题:https://www.cometoj.com/problem/1046 #include<bits/stdc++.h> using namespace std; typedef lo ...

  4. OfficeCommandbarViewer20171005.rar

    OfficeCommandbarViewer用于查看Office各组件工具栏和控件信息的一款软件. 采用了本地XML文件的方式,所以使用本工具不需要提前打开任何Office组件. 动态图: 下载地址: ...

  5. 学习python-20191217（1）-Python Flask高级编程开发鱼书_第04章_应用、蓝图与视图函数

    视频01: flask框架:最上层是app,它就像一个插线板一样,比如可以插入蓝图,还可以插入其他各种flask插件. 每个蓝图又可以插入很多视图函数,并可指定静态文件夹和模板文件夹. 好的代码结构, ...

  6. Tarjan模板——求强连通分量

    Tarjan求强连通分量的流程在这个博客讲的很清楚,再加上我也没理解透,这里就不写了. 缩点:将同一个连通块内的点视为同一个点. 扔一道模板题:codeVS2822爱在心中 第一问很显然就是求点数大于 ...

  7. kafka运行找不到或无法加载主类 Files\Java\jdk1.8.0_131\lib\dt.jar;C:\Program

    最近在研究Flink+kafka解决方案, kafka的安装首先需要安装zookeeper,在安装zookeeper是报错找不到或无法加载主类 Files\Java\jdk1.8.0_131\lib\ ...

  8. [LC] 257. Binary Tree Paths

    Given a binary tree, return all root-to-leaf paths. Note: A leaf is a node with no children. Example ...

  9. Spring 中的 JDBCTemplate

    新建一个java工程 写好spring配置文件,直接上代码 <?xml version="1.0" encoding="UTF-8"?> <b ...

  10. 吴裕雄--天生自然KITTEN编程：对话