响应式网页看起来高大上，但实际上，不用JS只用CSS也能实现响应式网站的布局

要用到的就是CSS中的媒体查询下面来简单介绍一下怎么运用

使用@media 的三种方式
第一： 直接在CSS文件中使用
@media 类型 and (条件1) and (条件二)
{
css样式
}
@media screen and (max-width:980px ) {
body{
background-color: red;
}
}
第二：使用@import导入
@import url("css/moxie.css") all and (max-width:980px);
第三，也是最常用的：使用link连接，media属性用于设置查询方式
<link rel="stylesheet" type="text/css" href="css/moxie.css" media=“all and (max-width=980px)”/>
我们只需用到width衍生出的max-width这个属性，定义输出设备中的页面可见区域宽度来控制该改变的样式即可。
下面是一个简单响应式的布局的html代码
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>响应式布局</title>

        <meta name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no" />

        <meta name="format-detection" content="telephone=no,email=no"/>

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

    </head>

    <body>

        <div>

            <header id="head">

                <ul>

                    <li>header1</li>

                    <li>header2</li>

                    <li>header2</li>

                    <li>header2</li>

                    <li>header2</li>

                </ul>

                <div>icon</div>

            </header>

            <section id="main">

                <div class="left">

                    left

                </div>

                <div class="center">

                    center

                </div>

                <div class="right">

                    right

                </div>

            </section>

            <footer id="foot">

                footer

            </footer>

        </div>

    </body>

</html>

下边是CSS样式

*{

    margin: 0px;

    padding: 0px;

    font-family: "微软雅黑";

}

#head,

#foot,

#main

{

    height: 100px;

    width: 1200px;

    /*width: 85%;*/

    background-color: goldenrod;

    text-align: center;

    font-size: 48px;

    line-height: 100px;

    margin: 0 auto;

}

#head div{

    display: none;

    font-size: 20px;

    height: 30px;

    width: 100px;

    background-color: green;

    float: right;

    line-height: 30px;

    margin-top: 35px;

}

#head ul{

    width: 80%;

}

#head ul li{

    width: 20%;

    float: left;

    text-align: center;

    list-style: none;font-size: 20px;

}

#main{

    height: auto;

    margin: 10px auto;

    overflow: hidden;

}

.left,

.center,

.right{

    height: 600px;

    line-height: 600px;

    float: left;

    width: 20%;

    background-color: red

}

.center{

    width: 60%;

    border-left: 10px solid #FFF;

    border-right: 10px solid #FFF;

    box-sizing: border-box;

}

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

    #head,

    #foot,

    #main{

    width: 100%;

    }

}

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

    .right{

        display: none;

    }

    .left{

        width: 30%;

    }

    .center{

        width: 70%;

        border-right: hidden;

    }

}

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

    .left,

    .center,

    .right{

        width: 100%;

        display: block;

        height: 200px;

        line-height: 200px;

    }

    .center{

        border: hidden;

        border-top: 10px  solid #FFFFFF;

        border-bottom: 10px solid #FFFFFF;

        height: 600px;

        line-height: 600px;

    }

    #head ul{

        display: none;

    }

    #head div{

        display: block;

    }

}

窗口大于1200px时显示的样子

 窗口小于1200大于980时，只会被压缩，并不会发生其他变化

当大于640小于980时，右侧栏隐藏

当小于640时，导航栏折叠，body三部分竖直排列显示，若窗口持续缩小，不在发生变化，区域被压缩

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

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

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

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

  2. CSS实现响应式布局

    用CSS实现响应式布局 响应式布局感觉很高大上,很难,但实际上只用CSS也能实现响应式布局要用的就是CSS中的没接查询,下面就介绍一下怎么运用: 使用@media 的三种方法 1.直接在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. linux 私房菜 CH5 笔记

    知识点 linux 大小写敏感 接口的切换 [Ctrl] + [Alt] + [F1] ~ [F6] :文字接口登入 tty1 ~ tty6 终端机: [Ctrl] + [Alt] + [F7] :图 ...

  2. 'utf8' codec can't decode byte 0xd1 in position 931: invalid continuation byte解决方法

    有时候,我得到这样的字符œ导致的UnicodeDecodeError错误. 我需要能够使串的UTF-8有或没有这些字符. 在工作中,经常遇到,读取一个文件,或者是从网页获取一个问题,明明看着是gb23 ...

  3. nginx反向代理与负载均衡

    一:nginx反向代理与负载均衡配置思路与用法 1.nginx反向代理:就是你去相亲时,媒婆就是这里的代理,让媒婆带你去见姑娘 2.nginx负载均衡:就是有很多的媒婆经过商量给你选出最适合你的姑娘, ...

  4. 用javascript动态改变网页文字大小

    <script>function setFontSize(size){document.getElementById('bottom').style.fontsize=size+'pt'; ...

  5. 零件库管理信息系统设计--part03：管理员登录部分设计

    兄弟们,我又回来啦! 上次我把表建完了.今天来点干货,我们用ssm框架来先简单实现一下管理员的登录功能. 在实现之前,我对user表(管理员表)做了些简单的修改,先来看看: 忽略哪些蓝色的马赛克和乱输 ...

  6. MapReduce简介以及详细配置

    1.MapReduce(一个分布式运算框架)将数据分为数据块,发送到不同的节点,并行方式处理. 2.NodeManager和DataNode在一个节点上,程序与数据在一个节点. 3.内容分为两个部分 ...

  7. 初学canvas，遇到width和height显示问题和用excanvas.js兼容IE问题

    /*-----------------------ITEYE 祈祷幸福博客原创,转载请注明.-------------------*/ 第一次认真写技术博客文~~~若有不严谨的地方,望指正. 今天是第 ...

  8. 深入React组件生命周期

    上篇博文使用React开发的一些注意要点对React开发的一些重点进行了简单的罗列总结,虽然也提到了React生命周期,但只略微小结,在此单独写篇React生命周期的总结. 在组件的整个生命周期中,随 ...

  9. Windows运行命令大全

    inetmgr   启动IIS控制台winver 检查Windows版本 wmimgmt.msc 打开Windows管理体系结构(wmi) wupdmgr Windows更新程序 wscript Wi ...

  10. 【转】air调用windows自带的虚拟键盘

    原文:http://bbs.9ria.com/blog-73243-19560.html 最近在做一个东西,需要用到虚拟键盘.刚开始准备用as3开发一套,结果突然想起来windows有个自带的虚拟键盘 ...