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

如下代码

#test{
    width:10px;
    height:10px;
}
@media screen and (min-height: 521px) and (max-height: 530px){
    #test{
        background-color:green
    }
}
@media screen and (min-height: 550px){
    #test{
        background-color:pink
    }
}

当页面刚加载时，视口高度为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 query

标签：

原文地址：http://www.cnblogs.com/rubyisaPM/p/4380071.html