1.媒体类型

HTML 4和CSS 2目前支持为不同的媒体类型设定专有的样式表, 比如, 一个页面在屏幕上显示时使用无衬线字体, 而在打印时则使用衬线字体, screen 和 print 是两种已定义的媒体类型, 媒体查询让样式表有更强的针对性, 扩展了媒体类型的功能;

2.媒体特性检测
媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成, 媒体查询中可用于检测的媒体特性有width、height和color(等), 使用媒体查询, 可以在不改变页面内容的情况下, 为特定的一些输出设备定制显示效果; 主要常用的是width, device-width;

width:视口宽度
height:视口高度
device-width:渲染表面的宽度(对我们来说,就是设备屏幕的宽度)
device-height:渲染表面的高度(对我们来说,就是设备屏幕的高度)
orientation:检查设备处于横向还是纵向
aspect-ratio:基于视口宽度和高度的宽高比, 一个16∶9比例的显示屏可以这样定义aspect-ratio: 16/9
device-aspect-ratio:和aspect-ratio类似, 基于设备渲染平面宽度和高度的宽高比
color:每种颜色的位数, 例如min-color: 16会检测设备是否拥有16位颜色
color-index:设备的颜色索引表中的颜色数, 值必须是非负整数
monochrome:检测单色帧缓冲区中每像素所使用的位数, 值必须是非负整数,如monochrome: 2
resolution:用来检测屏幕或打印机的分辨率,如min-resolution: 300dpi, 还可以接受每厘米像素点数的度量值, 如min-resolution: 118dpcm
scan:电视机的扫描方式,值可设为progressive(逐行扫描)或interlace(隔行扫描), 如720p HD电视(720p的p即表明是逐行扫描)匹配scan: progressive,而1080i HD电视(1080i中的i表明是隔行扫描)匹配scan: interlace
grid:用来检测输出设备是网格设备还是位图设备

在上述所有特性中, 除scan和grid之外, 都可使用min和max前缀来创建一个查询范围

3.使用媒体查询的三种方式

  1).在CSS文件引用时使用

  你是一块纵向(orientation: portrait)放置的显示屏(screen)吗?如果是则加载指定CSS文件

<link rel="stylesheet" media="screen and (orientation: portrait)" href="portrait-screen.css" />

  限制只有视口宽度大于800像素(min-width: 800px)的显示屏设备(screen)才能加载该CSS文件

<link rel="stylesheet" media="screen and (orientation: portrait) and (min-width: 800px)" href="800wide-portrait-screen.css" /> 

  限制只有{视口宽度大于800像素(min-width: 800px)的显示屏设备(screen)}或者投影仪(projection)才能加载该CSS文件

<link rel="stylesheet" media="screen and (orientation: portrait) and (min-width: 800px), projection" href="800wide-portrait-screen.css" /> 

  2).在CSS样式表中使用

  如果是显示屏(screen)并且屏幕分辨率小于等于400px(max-device-width: 400px)时h1的颜色为绿色, 注意device-width为设备显示屏宽度, width为视口宽度

@media screen and (max-device-width: 400px) {
h1 {color: green;}
}

  3).在样式表中引入其他样式表时

  如果是显示屏(screen)并且屏幕分辨率小于等于400px(max-width: 360px)时倒入phone.css文件

@import url("phone.css") screen and (max-width:360px);

  PS: 此方法会增加HTTP请求, 慎用

   Respond.js(https://github.com/scottjehl/Respond)是为Internet Explorer 8及更低版本增加媒体查询支持的最快的JavaScript工具, 但它目前无法解析CSS的@import命令

4.重置样式

  重置样式就是一组CSS声明, 用来覆盖不同浏览器渲染HTML元素时的各种默认样式, 重置样式一般会被加入到主样式文件的开头, 用来将各个浏览器的自有默认样式重置成统一表现, 确保样式表中后续追加的样式在不同浏览器中有相同的显示效果;

  例如以下:

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/ html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin:;
padding:;
border:;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height:;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing:;
}

5.浏览器自动调整页面大小

  比如 IOS 上的 Safari 浏览器默认是在980像素宽的画布上渲染页面, 然后将画布缩小到与视口大小匹配, 所以展示大页面时内容没有被切掉

6.阻止移动浏览器自动调整页面大小

  基于WebKit核心的浏览器(比如IOS和Android的浏览器)和很多其他浏览器都支持用viewport meta元素覆盖默认的画布缩放设置, 下例为将页面放大到设备实际尺寸两倍显示的meta标签

<meta name="viewport" content="initial-scale=2.0,width=device-width" /> 

  name="viewport"属性不言而喻, content="initial-scale=2.0的意思是将页面放大两倍(同理,0.5表示缩小一半,3.0表示放大3倍), 同时width=device-width告诉浏览器页面的宽度应该等于设备宽度

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

  将缩放比例设置为1.0, 这表示浏览器将按照其视口的实际大小来渲染页面, 将宽度设置为设备宽度, 意味着支持该特性的浏览器都将会按照设备宽度的实际大小来渲染页面, 设置完后任何浏览器都不再缩放页面了

7.详解viewport

  "viewport", 翻译为中文可以叫做"视区", 大家都知道移动设备的屏幕一般都比PC小很多, webkit浏览器会将一个较大的“虚拟”窗口映射到移动设备的屏幕上, 默认的虚拟窗口为980像素宽(修改viewport宽度即修改此值)(目前大部分网站的标准宽度), 然后按一定的比例(3:1或2:1)进行缩放, 也就是说当我们加载一个普通网页的时候, webkit会先以980像素(修改viewport宽度即修改此值)的浏览器标准加载网页, 然后再把整个页面全部缩小为490像素的宽度, 注意这个缩小是一个全局缩小, 也就是页面上的所有元素都会缩小, 如下图所示, 一个普通的文章页面在移动设备的效果:

  页面以980像素加载, 没有变形, 但是按比例缩放后, 很多东西用肉眼基本看不清了

  那么我们能不能人为改变webkit的视区呢?当然能, 在<head>与</head>之间加上如下视区代码:

<meta name="viewport" content="width=500"/>

  我们来看看页面加上强制视区大小命令后效果怎么样? 如下图所示:

  那么有没有更好的方法呢?比如说我们自动检测移动设备屏幕大小, 然后让内容自适应, 看下面的代码, device-width将自动检测移动设备的屏幕宽度

<meta name="viewport" content="width=device-width" />

  viewport实战:

  http://www.cnblogs.com/softlover/archive/2012/11/20/2779900.html

  http://www.3lian.com/edu/2012/04-25/26248_2.html

8.

HTML-HTML5+CSS3权威指南阅读(四、媒体查询)的更多相关文章

  1. html5+css3 权威指南阅读笔记(三)---表单及其它新增和改良元素

    一.新增元素及属性 1.表单内元素的form属性. html5: <form id="testForm"> <input type=text> </f ...

  2. HTML-HTML5+CSS3权威指南阅读(二、让IE支持HTML5标签及对CSS3 Media Query的兼容)

    兼容解决 HTML5是在低版本的浏览器(IE8-)的兼容是有限的,类似很多结构性的标 签<header>.<section>.<footer>等在IE8以下不会被识 ...

  3. HTML-HTML5+CSS3权威指南阅读(五、设备像素和CSS像素的概念)

    在这个迷你系列的文章里边我将会解释viewport,以及许多重要元素的宽度是如何工作的,比如<html>元素,也包括窗口和屏幕 这篇文章是关于桌面浏览器的,其唯一目的就是为移动浏览器中相似 ...

  4. HTML-HTML5+CSS3权威指南阅读(一、HTML5与HTML4之间的区别)

    一.HTML5与HTML4之间的区别 1. DOCTYPE 声明 1). HTML4 中为 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...

  5. HTML-HTML5+CSS3权威指南阅读(三、CSS选择器)

    1.伪元素选择器 first-line, first-letter, before, after 2.属性选择器 [attr*=val]: 如果元素的 attr 属性中包含用 val 指定的字符的话, ...

  6. HTML-HTML5+CSS3权威指南阅读(五、深入理解viewport)

    1.手机浏览器与桌面浏览器的不同 现在手机浏览器的显示分辨率与桌面浏览器差不多,但是手机的尺寸比电脑要小很多.一个没做过响应式处理的网站,在手机和电脑上显示完全一样的内容, 不可避免的会出现字体被缩小 ...

  7. HTML-HTML5+CSS3权威指南阅读(三、CSS3)

    不同的浏览器(包括-moz-代表的Mozilla Firefox, -ms-代表的Microsoft Internet Explorer等)厂商在发布正式版本之前之前, 试验各自对CSS3新特性的实现 ...

  8. HTML5与CSS3权威指南之CSS3学习记录

    title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...

  9. Html5与CSS3权威指南 百度云下载

    Html5与CSS3权威指南 百度云下载 链接:http://pan.baidu.com/s/1hq6Dlvm 密码:php3

随机推荐

  1. su与su-

    1.Linux中的用户切换:su和su - 的区别 大部分Linux发行版的默认账户是普通用户,而更改系统文件或者执行某些命令,需要root身份才能进行,这就需要从当前用户切换到root用户,Linu ...

  2. MVC增删改查例子

    一.显示用户列表1.新建UserInfoController控制器 public ActionResult Index() { DataTable table = SQLHelper.ExecuteR ...

  3. Node.js 连接 MySQL 并进行数据库操作

    Node.js 连接 MySQL 并进行数据库操作  按照这篇操作mysql的指引,我远程操作了我另一台电脑的mysql数据库. var mysql = require('mysql'); var c ...

  4. BILL.WEI]stimulsoft reports 中panel 妙用

    我们在通过stimulsoft reports做报表,有的时候,我们需要通过合并报表的一些中间列元素,我们就可以用到panel组件 如下图,我们需要合并报表中间项,一般手段达不到要求,只能通过嵌套pa ...

  5. 构建高性能web站点笔记一

    构建高性能web站点笔记 第三章 服务器并发处理能力 3.1吞吐率 描述服务器在实际运行期间单位时间内处理的请求数.也就是一定并发用户的情况下,服务器处理请求能力的量化体现. 吞吐率的前提包括: 并发 ...

  6. yaf框架加载全局公共函数

    在Boostrap里面建一个方法(按规则命名的函数都会被自动执行) public function _initCommonFunctions(){ Yaf_Loader::import(Yaf_App ...

  7. spring-boot-starter-mail技术总结

    1. spring-boot-starter-mail技术总结 1.1. 配置读取类SMTPTransport 在application中需要配置的信息,在此类中都可以看到,可以在此类打断点查看 1. ...

  8. .net core部署到Ubuntu碰到的问题

    数据库连接的时候,会报错“MySql.Data.MySqlClient.MySqlException:“The host localhost does not support SSL connecti ...

  9. Python全栈开发-Day10-进程/协程/异步IO/IO多路复用

    本节内容 多进程multiprocessing 进程间的通讯 协程 论事件驱动与异步IO Select\Poll\Epoll——IO多路复用   1.多进程multiprocessing Python ...

  10. 21 week4 submit buidAndRun() node-rest-client

    . 我们想实现一个提交代码的功能 这个功能有nodeserver 传到后边的server 验证 在返回给nodeserver 我们稍微修改一下ui ATOM修改文件权限不够 用下面命令 我们 Cont ...