1.什么是响应式布局？

　　响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简单说就是一个网站能够兼容多个终端。

2.响应式布局的优缺点？

　　优点：面对不同分辨率设备灵活性强，快捷解决多设备显示适应问题

　　缺点：工作量大；会出现隐藏多个无用元素加载时间延长；一定程度上改变了网站原有的布局结构

在页面的<head>标签中加入这句：

<meta name="viewport" content="width=device-width; initial-scale=1.0">

meta viewport这个属性是在移动设备上设置原始大小显示和是否缩放的声明。

参数设置：

width(viewport的宽度)

height(viewport的高度)

initial-scale(初始的缩放比例)

maximum-scale(允许用户缩放的最大比例)

minmum-scale(允许用户缩放的最小比例)

user-scalable(用户是否可以手动缩放)

3.用法

　　<link rel="stylesheet" type="text/css" media="only screen and (max-width:480px), only screen and (max-device-width: 480px)" href="small.css"/>

　　可用设备名参数：

类型  解释
 screen 彩色电脑屏幕 
 all 所有设备 
 braille 盲文 
 embossed 盲文打印 
 handheld 手持设备 
 print 文档打印或打印预览模式 
 projection 项目演示，比如幻灯片
 speech 演讲 
 tty 固定字母间距的网格的媒体，如电传打字机 
 tv 电视 

　　逻辑关键字：

关键字 说明
only 限定某种设备类型
and 逻辑与，连接设备名和选择条件
not 排除某种设备
, 设备列表

　　可用设备名参数：

媒体特性 值 可用媒体类型 接受min／max 简介
width <length> 屏幕／触摸设备 yes 定义输出设备中的页面可见区域宽度（单位一般是px）
height <length> 屏幕／触摸设备 yes 定义输出设备中的页面可见区域高度（单位一般是px）
device-width <length> 屏幕／触摸设备 yes 定义输出设备的屏幕可见宽度（单位一般是px）
device-height <length> 屏幕／触摸设备 yes 定义输出设备的屏幕可见高度（单位一般是px）
orientation portrait|landscape 位图介质类型 no 定义'height'是否大于或等于'width'。值就为portrait，即横向。否则为landscape，为竖屏
 aspect-ratio <ratio>  位图介质类型  yes  定义浏览器的长宽比 
 device-aspect-ratio <ratio>  位图介质类型  yes  定义设备屏幕长宽比，如常见的显示器比率：4/3，16/9，16/10 
 color <integer>  视觉媒体  yes  定义每一组输出设备的彩色元件个数。如果不是彩色设备，则值等于0 
 color-index <integer>  视觉媒体  yes  定义在输出设备的彩色查询表中的条目数，如果没有使用彩色查询表，则值等于0
 monochrome <integer>  视觉媒体  yes  定义在一个单色框架缓冲区中每像素包含的单色元件个数，如果不是单色设备，则值等于0 
 resolution <resolution>  位图介质类型  yes  定义设备的分辨率。如：96dpi，300dpi，118dpcm
 scan  progressive｜interlace 电视类  no  定义电视类设备的扫描工序，progressive逐行扫描，interlace隔行扫描
 grid <integer>  栅格设备  no

Determines whether the output device is a grid device or a bitmap device. If the device is grid-based (such as a TTY terminal or a phone display with only one font), the value is 1. Otherwise it is zero.

用来查询输出设备是栅格设备还是位图设备， 如果是栅格设备为1，否则值为0。

测试工具：

　　一个在线工具－Responsivator，可以模拟iphone、ipad和少量android设备。

实现举例：

　　/*浏览器的可视区域小于980px*/

　　@media screen and (max-width: 980px) {

　　#wrap {width: 90%; margin: 0 auto;}

　　#content {width: 60%; padding: 5%;}

　　#sidebar {width: 30%;}

　　#footer {padding: 8% 5%; margin-botton: 10px;}

　　}

　　/*浏览器的可视区域小于650px*/

　　@media screen and (max-width:650px) {......}

格式化一些css属性的初始值：

/*禁止iphone中safari的字号自动调整*/

html {

-webkit-text-size-adjust: none;

}

/*设置html5元素为块*/

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {

diplay: block;

}

/*设置图片视频等自适应调整*/

img {

max-width: 100%;

height: auto;

width: auto\9; /*ie8*/

}

.video embed, .video object, .video iframe {

width: 100%;

height: auto;

}

对于ie浏览器不支持media query的情况，我们可以使用Media Query JavaScript来解决，只需要在页面头部引用css3-mediaqueries.js即可。

例如：

<!-- [if lt IE 9] >

<script src="http://css-mediaqueries-js.googlecode.com/svn/trunk/css-mediaqueries.js"></script><!-- (或放在自己的服务器里) -->

<! [endif] -->

css3 响应式布局 Media Query的更多相关文章

  1. html5/css3响应式布局介绍及设计流程

    html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局 ...

  2. CSS3 响应式布局： @media (min/max-width:***) @font-face

    响应式布局 responsive design @media 属性 bootstrap  css 分析: @media (min-width:768px){ body{***} } use @medi ...

  3. CSS3–2.css3 响应式布局

    1.响应式布局 响应式布局是现在很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案.所谓的响应式布局,就是一个网站 ...

  4. CSS3–2.css3 响应式布局

    1.响应式布局 响应式布局是现在很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案.所谓的响应式布局,就是一个网站 ...

  5. css3响应式布局

    响应式布局 分栏布局,-webkit-column-width(定义每栏的宽度,会根据每栏宽度自动分成若干栏) <style> .wrap {width: 900px; border: 1 ...

  6. css3响应式布局教程—css3响应式

    响应式布局 一个网站能够兼容多个终端,并且在各个终端都可以很好展示体验. 媒体类型 在何种设备或者软件上将页面打开 123456789 all:所有媒体braille:盲文触觉设备embossed:盲 ...

  7. css3响应式布局设计——回顾

    响应式设计是在不同设备下分辨率不同显示的样式就不同. media 属性用于为不同的媒体类型规定不同的样式.根绝浏览器的宽度和高度重新渲染页面. 语法: @media mediatype and | n ...

  8. 响应式布局@media screen and ( max-width: 像素值 ) {}

    设计思路很简单,首先先定义在标准浏览器下的固定宽度(假如标准浏览器的分辨率为1024px,那么我们设置宽为980px),然后用Media Query来监测浏览器的尺寸变化,当浏览器的分辨率小于1024 ...

  9. CSS3响应式布局之弹性盒子

    CSS3弹性盒模型可以轻松的创建自适应浏览器流动窗口的布局或自适应字体大小的布局.同时该盒子决定了一个盒子在其他盒子的分布方式,及如何处理可用的空间. 自己写了一个弹性盒子的demo: 主要HTML代 ...

随机推荐

  1. HTML5 Communication API

    本文探讨用于构建实时(real-time)跨域(cross-origin)通信的两个重要模块:跨文档消息通讯和XMLHttpRequest Level 2.通过它们,我们可以构建引人注目的Web应用, ...

  2. 重装SQL前，一定要把SQL2005、SQL2008之类的彻底删除干净

    0.预备 如果你曾删除过VS2010或者VS2008之类的,同理也要照此方法删除 1.步骤,顺序无妨 卸载程序:控制面板---查找SQL..NET   删除干净 停掉SQL的所有服务:  计算机--管 ...

  3. Exp1 PC平台逆向破解 20164323段钊阳

    实验目标 学习两种方法运行代码片段,并学习如何注入运行任何Shellcode. 三个实验内容如下: 1.手工修改可执行文件,改变程序执行流程,直接跳转到getshell函数 2.利用foo函数的bof ...

  4. GO学习笔记 - 数据类型转换

    官方教程:https://tour.go-zh.org/basics/13 表达式 T(v) 将值 v 转换为类型 T . 一些关于数值的转换: var i int = 42 var f float6 ...

  5. leetcode 56 合并区间 JAVA

    题目: 给出一个区间的集合,请合并所有重叠的区间. 示例 1: 输入: [[1,3],[2,6],[8,10],[15,18]] 输出: [[1,6],[8,10],[15,18]] 解释: 区间 [ ...

  6. COGS1752. [BOI2007]摩基亚Mokia（CDQ，树状数组）

    题目描述 摩尔瓦多的移动电话公司摩基亚(Mokia)设计出了一种新的用户定位系统.和其他的定位系统一样,它能够迅速回答任何形如“用户C的位置在哪?”的问题,精确到毫米.但其真正高科技之处在于,它能够回 ...

  7. 敏感词过滤的算法原理之DFA算法

    参考文档 http://blog.csdn.net/chenssy/article/details/26961957 敏感词.文字过滤是一个网站必不可少的功能,如何设计一个好的.高效的过滤算法是非常有 ...

  8. 实例的初始化由JVM装载类的时候进行，保证了线程的安全性

    在23种设计模式中,单例是最简单的设计模式,但是也是很常用的设计模式.从单例的五种实现方式中我们可以看到程序员对性能的不懈追求.下面我将分析单例的五种实现方式的优缺点,并对其在多线程环境下的性能进行测 ...

  9. XorPay 个人支付平台增加 个人支付宝支付接口

      XorPay 今天新增 个人支付宝当面付 接口,欢迎大家使用. 「 XorPay 支付平台」 已经同时支持 个人微信支付接口 和 个人支付宝接口. 个人可用的 支付宝/微信支付 接口,支持 当面付 ...

  10. 一次完整的http请求全程

    当我们在打开浏览器的时候,在地址栏输入诸如 http://www.baidu.com时,几秒后浏览器打开百度页面,几秒钟内到底发生了哪些事情. 一.解析URL: 浏览器首先会对输入的URL进行检查,如 ...