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 ...
随机推荐
- css 的包含块 、负外边距，字体，文本行高
一.包含块 目的:确定元素的位置和相对大小(%) 1.正常文档流元素和浮动元素 ---- 父元素的 content-box 2.绝对定位元素 ---- 父元素的 padding-box 3.固定定位元 ...
- php的laravel框架使用心得
最近在做一项目,是基于laravel的后台api,用于与手机交互的,数据采用json格式.下面说下怎样在两周内把一个新框架或者语言用的得心应手. 项目采用laravel5.4+dingoapi+jwt ...
- 浅谈js中如何动态添加表头/表列/表格内容
我想很多童鞋用js动态向表格中添加数据很熟悉,而且也觉得非常简单!是的,对于写页面的童鞋来说,最喜欢写查询的页面了,动态向表格绑定数据.用for循环就可以轻松搞定. 如果我们的业务需求有所变化,可能我 ...
- java Socket(详解)转载
在客户/服务器通信模式中, 客户端需要主动创建与服务器连接的 Socket(套接字), 服务器端收到了客户端的连接请求, 也会创建与客户连接的 Socket. Socket可看做是通信连接两端的收发器 ...
- python机器学习实战（三）
python机器学习实战(三) 版权声明:本文为博主原创文章,转载请指明转载地址 www.cnblogs.com/fydeblog/p/7277205.html 前言 这篇notebook是关于机器 ...
- Python处理csv文件
Python处理csv文件 CSV(Comma-Separated Values)即逗号分隔值,可以用Excel打开查看.由于是纯文本,任何编辑器也都可打开.与Excel文件不同,CSV文件中: 值没 ...
- 异步加载回来的数据不受JS控制了
写成下面这种方式时,异步加载回来的数据不受JS控制 $(."orderdiv").click(function(){ $(this).find(".orderinfo&q ...
- hibernate exception nested transactions not supported 解决方法
开启事务之前先判断事务是否已经打开,方法如下: JdbcTransaction tx=(JdbcTransaction) session.beginTransaction(); 改为JdbcTrans ...
- [BZOJ 3629][ JLOI2014 ]聪明的燕姿
这道题考试选择打表,完美爆零.. 算数基本定理: 任何一个大于1的自然数N,都可以唯一分解成有限个质数的乘积N=P₁^a₁ P₂^a₂…Pn^an,这里P₁<P₂<…<Pn均为质数, ...
- 如何两周达到150行Java程序的能力--part 2
第一次课训练营课程打通了有C语言编程通往面向对象编程的道路,然而道路依然会曲折.下图是第二次训练营课程的训练大纲,从第二次开始,每次课首先进行测试. 针对作业1的训练要求,明确定义了13个具体的测试点 ...