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 ...
随机推荐
- javascript编码规范总结
1.嵌入规则 Javascript程序应该尽量放在.js的文件中,需要调用的时候在页面中以<script src="filename.js">的形式包含进来.Javas ...
- Spring核心--IOC
先说说Spring框架 Spring框架 Spring框架的作用 Spring 的核心(IOC功能) SpringAOP功能 原有的业务流程:请求->servlet-->service-- ...
- teamviewer试用期到期解决
1.命令行输入:%appdata%删除teamviewer文件夹2.命令行输入:regedit删除teamviewer文件夹3.卸载tv4.控制面板->设备管理器->网络适配器->f ...
- Python网络数据采集1-Beautifulsoup的使用
Python网络数据采集1-Beautifulsoup的使用 来自此书: [美]Ryan Mitchell <Python网络数据采集>,例子是照搬的,觉得跟着敲一遍还是有作用的,所以记录 ...
- python 密码学编程
最近在看一本书.名字是 python密码学编程.在此做一些笔记,同时也为有需要的人提供一些参考. *************************************************** ...
- 利用dbutils工具实现数据的增删查改操作(dbutis入门)
一.前期准备 1.安装数据库(如:mysql5.5) 2.安装Eclipse(如:3.4) 3.下载数据库驱动包 4.下载dbutis工具包 5.在Eclipse创建名为 dbutils 的工程并在工 ...
- mysql 忘记root密码，重置密码，及重置密码后权限问题不能登录的解决方案
由于一段时间没有使用MySQL,忘记了root登录密码. 决定重置下密码,搜索帮助. 参考文档: http://blog.csdn.net/odailidong/article/details/507 ...
- owncloud存储云服务搭建
owncloud是一款开源的存储云,用php写的,其作用可以像百度网盘那样存放文件到这个云当中, 只要能连上网,手机,平板,电脑都可以从中下载或者上传文件,用起来非常还不错,部署的过程也很简单,废话不 ...
- IOS中的单例设计模式
单例设计模式是IOS开发中一种很重要很常用的一种设计模式.它的设计原理是无论请求多少次,始终返回一个实例,也就是一个类只有一个实例.下面是苹果官方文档中关于单例模式的图片: 如图所示,左边的图是默认的 ...
- [UWP]了解模板化控件(5.1)：TemplatePart vs. VisualState
1. TemplatePart vs. VisualState 在前面两篇文章中分别使用了TemplatePart及VisualState的方式实现了相同的功能,其中明显VisualState的方式更 ...