响应式网页看起来高大上,但实际上,不用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. web第十天总结

    今天进入web学习第十天,学习了xml序列化,servlet,其他的想不起来了,回顾以前的java基础面向对象,多态,继承.封装,但是还不是很理解.对于map,list,set更是理解不透,2011年 ...

  2. 将两个列不同的DataTable合并成一个新的DataTable

    /// <summary>         /// 将两个列不同(结构不同)的DataTable合并成一个新的DataTable         /// </summary> ...

  3. HTTP协议&SOCKET协议

    一. HTTP协议是什么? 我们在浏览器的地址栏里输入的网站地址叫做 URL(UniformResourceLocator,统一资源定位符).就像每家每户都有一个门牌地址一样,每个网页也都有一个Int ...

  4. Java Reference 源码分析

    @(Java)[Reference] Java Reference 源码分析 Reference对象封装了其它对象的引用,可以和普通的对象一样操作,在一定的限制条件下,支持和垃圾收集器的交互.即可以使 ...

  5. MyBatis极速入门开发手册(2017-2-6更新)

    前言: 本篇文章对我的学习内容做一个归纳梳理,同时也记录一些学习过程中遇上的问题及注意事项等等,可以帮助新入门的朋友们消除一些误区与盲区,希望能帮上一些正在学习的朋友们.在编写时会引用一些mybati ...

  6. ADO.NET温习(一)

    ADO.NET概述 本节复习如何使用ADO.NET访问C#程序中的数据,主要介绍如何使用SqlConnection类和OleDbConnection类连接数据库,以及断开与数据库连接.深入讨论命令对象 ...

  7. 对VC++6.0爱得深沉(二)个性工具的定制

    初始界面看起来很简洁,但是经过一番改造后,你会拥有私人定制的壮丽界面O(∩_∩)O~,让我们开始吧. 1)原有工具的显示隐藏.位置调整: 比如你觉得这个插入图标没什么用,想把这个隐藏,那么你可以打开[ ...

  8. WPF中MeasureOverride ArrangeOverride 的理解

    1. Measure Arrange这两个方法是UIElement的方法 MeasureOverride ArrangeOverride这两个方法是FrameworkElement的方法,Framew ...

  9. 如何下载github项目中的部分文件(文件夹)

    https://minhaskamal.github.io/DownGit/#/home 将你要下载的链接放进去即可.

  10. 微信小程序已经开放个人开发者申请了,还不快上车?

    前言 就在昨天(3月27号),微信公众号平台推送了文章"小程序新能力",这篇文章是广大开发者的福音.个人开发者可申请小程序!!! 小程序开放个人开发者申请注册,个人用户可访问微信公 ...