CSS实现响应式布局
用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实现响应式布局的更多相关文章
- Responsive Web CSS – 在线响应式布局创建器
如果您已经使用了 CSS 或前端框架,创建响应式布局应该不难. 然而,如果你刚涉足这类布局,Responsive Web CSS 可以帮助你快速上手. 这是一个基于 Web 的工具,使任何人都可以通过 ...
- 用CSS实现响应式布局
响应式网页看起来高大上,但实际上,不用JS只用CSS也能实现响应式网站的布局 要用到的就是CSS中的媒体查询下面来简单介绍一下怎么运用 使用@media 的三种方式 第一: 直接在CSS文件中使用 @ ...
- css实现响应式布局的相关内容
所以我就在做自适应的时候查了一些资料 首先我发现一个问题:有响应式布局和自适应布局两种布局效果 简单来说,响应式布局就是不同的设备无论大小 布局都自动调整大小 页面布局都一样 可以保证无论什么设备 用 ...
- 【css】响应式布局入门【转】
最近研究响应式设计框架的时候,发现网上很多相关的属性介绍,却很少有系统的入门级使用的文章,我自己整理了一篇入门知识,并没有什么高深的理论,也不牵扯到框架. 目前已经越来越多的站点以及wap站点使用响应 ...
- CSS的响应式布局
响应式布局是什么 它是相对于固定像素大小的网页而言的,顾名思义,响应式布局就是网页能够响应各种各样不同分辨率大小的设备,能够将网页很好的呈献给用户. 如何实现响应式布局? 1.CSS3@media查询 ...
- css的响应式布局和动画
把响应式布局和动画放在一起写是因为他们有个共同点@符号 先讲讲响应式布局@media 响应式布局==曾经==非常的流行,这种布局方式可以做出一也兼容一切设备的页面,但是当页面的功能越来越多,css文件 ...
- CSS实现响应式布局(自动拆分几列)
1.css代码 <style type="text/css"> .container{ margin-top: 10px; } .outerDiv{ float:lef ...
- css中响应式布局中样式的代码书写方法
代码示例:@media only screen and (min-width: 320px){ html { font-size: 8px !important; } .mulu-zi{ positi ...
- 关于bootstrap和响应式布局
bootstrap导入 首先需要安装好插件 然后就是在代码器写导入代码 代码如下 <html lang="zh-CN"> <head> <meta c ...
随机推荐
- centos telnet
yum install telnet yum install telnet-server
- C++ sizeof 运算符
sizeof 是一个关键字,它是一个编译时运算符,用于判断变量或数据类型的字节大小. sizeof 运算符可用于获取类.结构.共用体和其他用户自定义数据类型的大小. 使用 sizeof 的语法如下: ...
- BigDecimal进行精确运算
public class Test_1 { public static void main(String[] args) { System.out.println(0.06+0.01); System ...
- 1、简述在java网络编程中，服务端程序与客户端程序的具体开发步骤？
网络编程分为UDP通信和TCP通信 UDP协议: 发送端:1.创建DatagramSocket对象.2.创建DatagramPacket对象,并封装数据.3.发送数据.4.释放 资源. 接收端:1.创 ...
- JAVA循环结构学校上机经常遇到的几题 笔记
package homework.class4; import java.util.*; import java.util.stream.Collectors; import java.util.st ...
- LeetCode No.85,86,87
No.85 MaximalRectangle 最大矩形 题目 给定一个仅包含 0 和 1 的二维二进制矩阵,找出只包含 1 的最大矩形,并返回其面积. 示例 输入: [ ["1", ...
- Angular开发者指南（五）服务
服务 AngularJS服务是使用依赖注入(DI)连接在一起的可替代对象. 可以使用服务在整个应用程式中整理和分享程式码. AngularJS服务有: 延迟初始化 - AngularJS只在应用程序组 ...
- Eclipse安装tomcat插件
安装插件:Pivotal tc Server Integration for Eclipse右击server可以定位到web项目部署的目录http://marketplace.eclipse.org/ ...
- 整数拆分-dp问题
Integer Partition In number theory and combinatorics, a partition of a positive integer n, also call ...
- 吴裕雄--天生自然KITTEN编程：对话