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 ...
随机推荐
- TCP 滑动窗口
滑动窗口协议 流量控制方法 PUSH 慢启动 隔一个报文段确认"的策略实际就是因为 delayed ack,同时接收到两个待确认的ACK包时,就立即发送确认包. 滑动窗口实例 解 ...
- Spring 并发访问的线程安全性问题
首先对于spring的IOC来说,对象是由Spring来帮我们管理,也就是在Spring启动的时候,在Spring容器中,由Spring给我们创建的,Spring会帮我们维护,一般都是单例的,也就是一 ...
- JAVA WEB主流开发工具下载集
JAVA SEhttp://www.oracle.com/technetwor ... ownloads/index.html eclipsehttp://www.eclipse.org/downlo ...
- Socket学习总结系列(二) -- CocoaAsyncSocket
这是系列的第二篇 这是这个系列文章的第二篇,要是没有看第一篇的还是建议看看第一篇,以为这个是接着第一篇梳理的 先大概的总结一下在上篇的文章中说的些内容: 1. 整理了一下做IM我们有那些途径,以及我们 ...
- python基础===Python 代码优化常见技巧
Python 代码优化常见技巧 代码优化能够让程序运行更快,它是在不改变程序运行结果的情况下使得程序的运行效率更高,根据 80/20 原则,实现程序的重构.优化.扩展以及文档相关的事情通常需要消耗 8 ...
- Cognos配置管理
--Cognos配置管理 --------------------------2014/03/19 进入配置管理界面: /washome/cognos/c10/bin64 ./cogconfig.sh ...
- Get host name and port(Object-c)
/************************************************************************** @param pChHostName: [out ...
- 如何用QUnit为JS代码做单元测试
非常好的入门文章: http://www.zhangxinxu.com/wordpress/2013/04/qunit-javascript-unit-test-%E5%8D%95%E5%85%83% ...
- 关于php文件读取的一些学习记录
初学PHP的时候使用了一些文件读取API,但是没有真正弄清楚各API的区别以及差异,于是找了一篇学习了一下,贴在这里,引用自IBM社区的一篇文章, 整体整理测试如下 <?php /** * Cr ...
- 基于Grafana的Repeate Panel快速定义面板
Grafana提供的Repeate Panel功能,可以快速定义一类相同的面板. 一.定义模板变量 点击"设置"."模板",如下所示: 设置模板变量名称.类型. ...