html5 响应式布局（媒体查询）
html5/css3响应式布局介绍及设计流程，利用css3的media query媒体查询功能。移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局的媒体查询media query兼容问题
- @media screen and (min-width: 800px) and (max-width : 1200px)
media属性后面跟着的是一个 screen 的媒体类型。然后用 and 关键字来连接条件，然后括号里就是一个媒体查询语句，这个条件语句意思是在大于600小于960的分辨率下所激活的样式表。
html代码演示（方法一）：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>响应式</title>
<style>
.box{
margin: auto;
}
.box>div:nth-child(1){
background-color: red;
}
.box>div:nth-child(2){
background-color: orange;
}
.box>div:nth-child(3){
background-color: yellow;
}
.box>div:nth-child(4){
background-color: green;
}
.box>div:nth-child(5){
background-color: skyblue;
}
.box>div:nth-child(6){
background-color: mediumpurple;
}
@media screen and (max-width: 1200px) {
.box{
width: 500px;
outline: 1px solid;
}
.box>div{
width: 50%;
height: 100px;
float: left;
}
}
@media screen and (max-width: 800px) {
.box{
width: 250px;
}
.box>div{
width: 100%;
height: 100px;
}
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
html代码演示（方法二）：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>响应式布局</title>
<style>
.box{
margin: auto;
}
.box>div:nth-child(1){
background-color: red;
}
.box>div:nth-child(2){
background-color: orange;
}
.box>div:nth-child(3){
background-color: yellow;
}
.box>div:nth-child(4){
background-color: green;
}
.box>div:nth-child(5){
background-color: skyblue;
}
.box>div:nth-child(6){
background-color: mediumpurple;
}
.box1{
width: 500px;
}
.box1>div{
width: 50%;
height: 100px;
float: left;
}
.box2{
width: 250px;
}
.box2>div{
width: 100%;
height: 100px;
}
@media screen and (max-width: 1200px){
.box2{
display: none;
}
}
@media screen and (max-width: 800px) {
.box2{
display: block;
}
.box1{
display: none;
}
} </style>
</head>
<body>
<div class="box box1">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box box2">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
效果如下（上面两种方法实现效果一样）：
其他尺寸的的也是这么操作，当然这只是最简单的方法，还是有很多其他的方法实现。比如用框架，jq js也可以。
时刻鼓励自己：
埋头读书，抬头做人!
不登高山不知天之高也，不临深溪不知地之厚也
懦弱的人只会裹足不前，莽撞的人只能引为烧身，只有真正勇敢的人才能所向披靡
我们这个世界，从不会给一个伤心的落伍者颁发奖牌。
海浪的品格,就是无数次被礁石击碎又无数闪地扑向礁石、
鞋底磨穿了，不等于路走到了头。
松驰的琴弦，永远奏不出时代的强音。
躺在被窝里的人，并不感到太阳的温暖。
不安于现状，不甘于平庸，就可能在勇于进取的奋斗中奏响人生壮美的乐间。
不去耕耘，不去播种，再肥的沃土也长不出庄稼，不去奋斗，不去创造，再美的青春也结不出硕果。
(小小小尾巴/原创）
html5 响应式布局（媒体查询）的更多相关文章
- 关于响应式、媒体查询和media的关系 、流媒体布局flex 和em rem像素的使用 我有一些废话要讲.....
一.什么是响应式 随着移动端越来遇火 网站的布局成为一个热议的话题 有的人喜欢用手机浏览网站.有的人喜欢用paid浏览网站.有人喜欢用电脑浏览网站 那么问题来了 我们怎么样才能使用一套css样式 完成 ...
- 浅谈html5 响应式布局
一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本. 这个概念是为解决移动互联 ...
- html5 响应式布局
一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本. 这个概念是为 ...
- html5响应式布局
1.media控制布局 <link type="text/css" rel="stylesheet" href="css04.css" ...
- 【浅谈html5 响应式布局之自动适应屏幕宽度】
允许网页宽度自动调整 “自适应网页设计”到底是怎么做到的?其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. <meta name=”viewport” content=”w ...
- Bootstrap响应式布局介绍
一.响应式布局 1.什么是响应式网页 2.响应式网页必须做到的几件事 1.布局,使用流式布局(默认文档流+浮动)+弹性布局+栅格布局 2.文字和图片大小随着容器大小改变 3.媒体查询技术(css3) ...
- CSS3移动端vw+rem不依赖JS实现响应式布局
1.前言 (1)vw/vh介绍 在使用之前,我们先简单了解一下什么是vw和rem以及它们的作用,vw是css3出现的一个新单位,它是"view width"缩写,定义为把当前屏幕分 ...
- CSS：使用CSS媒体查询创建响应式布局
现如今在Web前端领域,BootStrap是一个最流行的UI库,其12列的栅栏系统为响应式布局提供了一种对程序员来说很好操作的模式. 追究Bootstrap的内在原理,其实就是通过媒体查询来完成对不同 ...
- bootstrap_响应式布局简介_媒体查询_媒体选择器_2x3x图
响应式布局 在不同设备上,同一网页根据设备特性(显示屏大小,分辨率)呈现不同的布局样式. 思考: 获取设备相关信息 将屏幕划分为几个区域 给需要变化的结构写多套 css 样式 媒体查询 常用写法 @m ...
随机推荐
- PHP执行linux命令mkdir权限问题
在linux系统中,root帐号执行php命令: mkdir('test', 0777); 结果文件的权限依然为: drwxr-xr-x 2 root root Jul 27 19:30 test ...
- [补档]Cube
Cube 题目 给你一个n×m的棋盘,有一个1×1×2的长方体竖直放在(1,1)上,你可以将其在棋盘上滚动,你的目标是让其竖直放在(n,m)上,问至少需要多少次操作.(放倒.竖直.翻滚) INPUT ...
- SSH项目过一段时间之后再访问会报一次Could not open Hibernate session for transaction 异常，Caused by: com.mysql.jdbc.CommunicationsException: Communications link failure due to underlyi，再重新方法即可访问成功（通常出现在过了一晚之后再去访问系统）
前端时间到客户那去进行项目的上线测试,将项目部署好之后,运行都是正常的,可是每到了第二天早上访问的时候,就会报一个Could not open Hibernate session for transa ...
- cacti监控部署与配置
cacti是一套基于PHP,mysql,SNMP及RRDTool开发的网络流量测试图形分析工具 cacti是通过snmpget来获取数据,使用RRDtool绘画图形 ,而且完全可以不需要了解RRDto ...
- 【学习进步之路】-【浏览器兼容】透明背景图IE、360浏览器不兼容
最近在项目中遇到了浏览器兼容问题,透明背景图在IE或360兼容模式下没有效果,以前都是网上搜到结果,直接用了,并没有深入的去理解和利用,总会在下一次使用的时候忘记.为了让自己在前端方面学习更有成效,想 ...
- swift3.0 底部弹出菜单 UIAlertController的使用
let optionMenuController = UIAlertController(title: nil, message: "选择图片", preferredStyle: ...
- Handler案例-简易打地鼠游戏（延时处理消息）
1. 游戏思路 (1)用ImageView显示地鼠,初始状态将ImageView设置为不可见状态.当开始游戏后,通过sendMessageDelayed()方法延时发送消息,使ImageView显示出 ...
- Android 开发中常见的注意点
这里总结了Android开发中常用的注意点.只有总结,没有展开举例讲解,展开的话,一个点都可以写一篇文章了..... 这类问题都一定不要犯. 重要的事情说三遍!!! 说三遍!!! 遍!!! 资源 不允 ...
- 1.怎样控制div中的图片居中
答案如下: #div{ width: 100%; height: 100%; border: 1px solid #000; text-align: center;}#div img{ vertica ...
- 已有 JFFs2文件系统的修改
项目应用中,对于前人留下的JFFS2的文件,有时候我们需要修改,但是苦于没有源文件,实际操作很多时候无所适从.每次支持生产之后再进行人为的升级.这样费时费力,也给生产人员增加了负担. 为了解决这个问题 ...