media query

关于手机屏幕尺寸

参考文章:https://github.com/xiangpaopao/blog/issues/8
screen.width和screen.height表示手机的分辨率
window.outerWidth和window.outerHeight指浏览器外沿大小(而实际上在有些手机上的显示显然很不靠谱，有时比innerWidth和innerHeight还小)
window.innerWidth和window.innerHeight指浏览器的视口大小，即实际的网页显示范围

media query

如下代码

1. #test{
2. width:10px;
3. height:10px;
4. }
5. @media screen and (min-height: 521px) and (max-height: 530px){
6. #test{
7. background-color:green
8. }
9. }
10. @media screen and (min-height: 550px){
11. #test{
12. background-color:pink
13. }
14. }

当页面刚加载时，视口高度为521px，那么test会显示出绿色背景，当浏览器为全屏时，会显示出粉色背景。所以我们得出这样的结论：
media query会随着视口的改变去渲染网页，而不是只在页面加载时一次性决定网页样式。这一点其实在很多media query的demo中都有体现（http://www.webdesignerwall.com/demo/media-queries/）。

使用外联样式时如何根据媒体类型选择样式文件

这组样式是用于在PC上通过浏览器的尺寸改变来模拟移动端的表现。其意思就是屏幕宽度大于480px就用desktop.css，小于480px就使用andriod.css。

媒体类型

• all
  所有媒体类型
• braille
  用于盲文触觉反馈装置
• embossed
  用于分页的盲人打印机
• handheld
  用于手持设备
• print
  用于打印机
• projection
  用于项目介绍，例如投影仪
• screen
  最早用于彩色计算机屏幕
• speech
  用于语音同步器。注：css2有一个常用媒体类型“aural”来实现这一目的
• tty
  用于定宽字符网格（如电报，终端或者显示兼容有限的便携设备）。在使用'tty'媒体类型时请勿使用'px'为单位。
• tv
  用于电视（低分辨率，彩色，滚动能力有限的屏幕，有声）
  以上设备类型是大小写敏感的。

媒体类型分类

Media Types	continuous/paged	visual/audio/speech/tactile	grid/bitmap	interactive/static
braille	continuous	tactile	grid	both
embossed	paged	tactile	grid	static
handheld	both	visual, audio, speech	both	both
print	paged	visual	bitmap	static
projection	paged	visual	bitmap	interactive
screen	continuous	visual, audio	bitmap	both
speech	continuous	speech	N/A	both
tty	continuous	visual	grid	both
tv	both	visual, audio	bitmap	both

Media features	description	value	Applies to	Accepts min/max
width	输出设备的目标显示区域的宽度	length	visual and tactile	yes
height	输出设备的目标显示区域的高度	length	visual and tactile	yes
device-width	输出设备的呈现面的宽度（对于连续媒体，就是屏幕的宽度;对于分页媒体，指页的宽度）	length	visual and tactile	yes
device-height	输出设备的呈现面的高度（对于连续媒体，就是屏幕的高度；对于分页媒体，指页的高度）	length	visual and tactile	yes
orientation	如果目标设备的高度大于宽度，那么就是portrait（肖像），否则就是landscape（风景画）	portrait/landscape	bitmap	no
aspect-radio	设备的宽高比(width/height)	ratio	bitmap	yes
device-aspect-radio	设备的呈现面宽高比（device-width/device-height）	ratio	bitmap	yes
color	输出设备每个彩色分量所占的位数	integer	visual	yes
color-index	表示颜色查找表中的记录数，如果设备没有采用颜色查找表，则该值为0	integer	visual	yes
monochrome	表示一个单色帧缓冲中每个像素的位数，如果设备不是单色设置，该值为0	integer	visual	yes
resolution	输出设备的分辨率，例如像素的密度。如果查询非块状像素的设备，min-resolution中最小值需和指定值做比较，max-resolution也是一样。不含min-或max-前缀的resolution不能匹配任何非块状像素的设备。	resolution	bitmap	yes
scan	表示电视的扫描过程	progressive/interlace	tv	no
grid	表示网格还是位图，如果设备是基于网格的（如tty终端或者只显示固定字体的电话），该值为1，否则为0	integer	visual and tactile	no

来自为知笔记(Wiz)

转载于:https://www.cnblogs.com/rubyisaPM/p/4380071.html