响应式网页看起来高大上，但实际上，不用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属性用于设置查询方式

我们只需用到width衍生出的max-width这个属性，定义输出设备中的页面可见区域宽度来控制该改变的样式即可。

下面是一个简单响应式的布局的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三部分竖直排列显示，若窗口持续缩小，不在发生变化，区域被压缩

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

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

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

CSS实现响应式布局

用CSS实现响应式布局 响应式布局感觉很高大上,很难,但实际上只用CSS也能实现响应式布局要用的就是CSS中的没接查询,下面就介绍一下怎么运用: 使用@media 的三种方法 1.直接在CSS文件中使 ...

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

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

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

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

CSS的响应式布局

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

css的响应式布局和动画

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

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

1.css代码

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

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

关于bootstrap和响应式布局

bootstrap导入 首先需要安装好插件 然后就是在代码器写导入代码 代码如下

随机推荐

4.View绘制分析笔记之onDraw

上一篇文章我们了解了View的onLayout,那么今天我们来学习Android View绘制三部曲的最后一步,onDraw,绘制. ViewRootImpl#performDraw private ...

数据结构：C_顺序栈的实现

数据结构顺序栈的实现(C语言版) 1.写在前面 栈是一种遵循元素先进(Push)后出(Pop)规则的线性表,它的实现可以用数组或者链表. ..... 2.代码分解 2.1对栈的结构定义: typede ...

[转]Chrome 控制台console的用法

Chrome 控制台console的用法 下面我们来看看console里面具体提供了哪些方法可以供我们平时调试时使用. 目前控制台方法和属性有: ["$$", "$x&q ...

spring aop配置及用例说明(3)

欢迎转载交流:http://www.cnblogs.com/shizhongtao/p/3476336.html 1.这里说一下aop的@Around标签,它提供了在方法开始和结束,都能添加用户业务逻 ...

S2SH商用后台权限系统第三讲

个位博友: 您好!今天我们做下登录页面,已经如何登录系统.我们的登录页面很简单,用户名.密码.验证码.下面首先描述下验证码的概念,验证码是为了防止机器人恶意登录.我们这里的验证码采用4位数字,当然你也 ...

开始Unity3D参观考察

前言:这个系列的文章纯属对自己学习的整理,非高手之作. 但确实的记载了我作为一个没接触过3D游戏编程的大学生的心路历程.争取每周整理一次吧. 之所以会開始学Unity3D,最基本的原因是由于在快放暑假 ...

StringBuffer和String需要注意的

首先,StringBuffer的toString方法和String的subString方法都是在新生成了一个新的String. 最近做的一个功能,多线程的从SQLite数据库中读取数据.将数据拼成在M ...

Linux系统监控命令详解

1. top命令 top命令经常用来监控Linux的系统状况,比如cpu.内存的使用,程序员基本都知道这个命令,但比较奇怪的是能用好它的人却很少,例如top监控视图中内存数值的含义就有不少的曲解. 输 ...

项目实战-使用PySpark处理文本多分类问题

原文链接:https://cloud.tencent.com/developer/article/1096712 在大神创作的基础上,学习了一些新知识,并加以注释. TARGET:将旧金山犯罪记录(S ...

Java面试题详解三：比较器

一,Comparable和Comparator1.Comparable可以认为是一个内比较器,实现了Comparable接口的类有一个特点,就是这些类是可以和自己比较.Comparable接口中只有一 ...