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 API使用
最近在完成优达学城前端开发(入门)课程的P4项目中,要求调用google地图进行交互,项目已提供部分js代码和html代码.但在申请google地图API密钥时由于网络等原因,打不开或者连接超时,所以 ...
- Windows10系统PHP开发环境配置
Windows下搭建(Apache+PHP+MySQL)=>WAMP Linux下搭建(Apache+PHP+MySQL) =>LAMP PHP开发环境配置一般有套件安装和自定义安装两种方 ...
- Python爬虫从入门到放弃（二十二）之 爬虫与反爬虫大战
爬虫与发爬虫的厮杀,一方为了拿到数据,一方为了防止爬虫拿到数据,谁是最后的赢家? 重新理解爬虫中的一些概念 爬虫:自动获取网站数据的程序反爬虫:使用技术手段防止爬虫程序爬取数据误伤:反爬虫技术将普通用 ...
- akoj-1148-小光棍数
小光棍数 Time Limit:1000MS Memory Limit:65536K Total Submit:197 Accepted:94 Description 最近Topcoder的XD遇到 ...
- F数圈圈
Description 幼儿园的小朋友对数字其实不是很感兴趣,他们更感兴趣的是形状,现在给你一个数字,小朋友都会数出其中一共有多少圆圈圈 Input 一个数字n长度不超过19位 Output 输出其中 ...
- HTML style基础2
2017.0807 晴 style 样式实例 背景颜色 font-family: '.PingFang SC';">背景颜色 标题<h2 style=" font-f ...
- 分辨率验证工具 - 【Firesizer】的使用升级-Firefox-29.0
今天打算使用Firesizer,但是在Firefox浏览器的右下角找不到Firesizer了. 在官网搜了搜(https://addons.mozilla.org/en-US/firefox/addo ...
- 关于mac下配置mysql心得
PS:配置一个mysql烦了一天,不过还是有所收获. 首先,下载安装我就不多啰嗦了.关键是在我们安装的最后会有一个临时密码,例如我的PBxsy=ES71(u: 这是非常重要的信息,如果没有得到的话,建 ...
- Mac实用操作技巧（二）
输入特殊字符.Emoji表情符号 有的场景需要输入诸如café中的é字母,这时可以按下Option + E之后,再按下E即可输入(注意需要将中文输入法关闭,包括搜狗输入法).还有更多的特殊符号可以输入 ...
- OpenTK教程-2绘制一个三角形（正确的方法）
上一个教程向我们展示了如何在屏幕上画一个三角形.但是,我说过,那是一种古老的方式,即使它能够正常运行,但是现在这已经不是"正确"的方式.上篇文章中我们将几何发送到GPU的方式是所谓 ...