响应式布局设置--@media only screen and (转载)

document.write("浏览器分辨率是"+document.documentElement.clientWidth+"*"+document.documentElement.clientHeight );  
document.write("屏幕分辨率是"+window.screen.width+"*"+window.screen.height); 

@media only screen and 
only (限定某种设备)
screen  是媒体类型里的一种
and  被称为关键字,其他关键字还包括  not (排除某种设备)

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

screen一般用的比较多,下面是我自己的尝试,列出常用的设备的尺寸,然后给页面分了几个尺寸的版本。

/* 常用设备 */
设备 屏幕尺寸
显示器 1280 x 800
ipad 1024 x 768
Android 800 x 480
iPhone 640 x 960

两种方式
a < link rel ="stylesheet" type ="text/css" href ="styleB.css" media ="screen and (min-width: 600px) and (max-width: 800px)" >
意思是当屏幕的宽度大于600小于800时,应用styleB.css
b @media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时,应用下面的CSS样式*/
  .class {
    background: #ccc;
  }
}

device-aspect-ratio

device-aspect-ratio可以用来适配特定屏幕长宽比的设备,这也是一个很有用的属性,比如,我们的页面想要对长宽比为4:3的普通屏幕定义一种样式,然后对于16:9和16:10的宽屏,定义另一种样式,比如自适应宽度和固定宽度:
@media only screen and (device-aspect-ratio:4/3)
-webkit-min-device-pixel-ratio的常见值对比是设备上物理像素和设备独立像素,设备像素比率
   
设备分辨率设备像素比率
Android LDPI320×2400.75
Iphone 3 & Android MDPI320×4801
Android HDPI480×8001.5
Iphone 4960×6402.0
 
  

     -webkit-min-device-pixel-ratio: 1.0

  • 所有非 Retina 的 Mac
  • 所有非 Retina 的 iOS 设备
  • Acer Iconia A500
  • Samsung Galaxy Tab 10.1
  • Samsung Galaxy S
  • 其他设备
   
  • -webkit-min-device-pixel-ratio为1.3
  1. Google Nexus 7
  • -webkit-min-device-pixel-ratio为1.5
  1. Google Nexus S 
  2. Samsung Galaxy S II 
  3. HTC Desire
  4. HTC Desire HD
  5. HTC Incredible S 
  6. HTC Velocity
  7. HTC Sensation 
  • -webkit-min-device-pixel-ratio为2.0
  1. iPhone 4
  2. iPhone 4S
  3. iPhone 5
  4. iPad (3rd generation)
  5. iPad 4
  6. 所有Retina displays 的MAC
  7. Google Galaxy Nexus
  8. Google Nexus 4
  9. Google Nexus 10
  10. Samsung Galaxy S III
  11. Samsung Galaxy Note II
  12. Sony Xperia S
  13. HTC One X 

-webkit-min-device-pixel-ratio: 3.0

   1.HTC Butterfly
   2.Sony Xperia S

(min-resolution:144dpi)
<resolution>(分辨率) 
使用于:位图媒体类型,接受max/min前缀:

resolution”媒体特性描述输出设备的分辨率,例如,像素密度。若查询设备的非方形像素,在“min-resolution”查询中指定的值必须与最稀疏尺寸进行比较,在“max-resolution”查询中必须与最密集尺寸进行比较。对于“resolution”(没有“min-”或“max-”前缀)查询从不查询设备的非方形像素。

对于印刷机,相当于分辨率(任意颜色的绘制点的分辨率)。

举例说明:该媒体查询表示样式表适用于分辨率大于每英寸144点的设备:
@media print and (min-resolution: 144dpi) { … }

在这篇文章中我尝试解开媒体查询的迷雾。首先是名词解析:

width: 通常指代视口宽度;另外width和device width的区别在于,device width指代是屏幕的物理宽度。比如iphone5的屏幕分辨率是1136×640,竖屏时device width是640,横屏时是1136。通常,移动设备的浏览器都是全屏的,所以一般情况下width等于device-width。但是height和device-height的情况不一样(浏览器上方的地址栏和下方的工具栏有可能不算进视口高度)。鉴于一般媒体查询不采用height,所以本文所有例子全部使用width,指代width的像素全部加粗便于理解。

  • 规则1: @media only screen and (min-width: 330px) {…}

指「width大于或者等于min-width,采用{…}的样式」

所以,如果width是320px,这条规则返回false;返回false的媒体查询规则会直接被浏览器过滤掉,不会渲染这条规则中的CSS样式。这种情况翻译过来就是:

「如果320px大于等于330px,采用{…}的样式」

问题1:有width为310px, 320px, 330px, 340px, 350px的视口,哪些视口会采用以上规则(指代规则1中{…}的CSS样式)?

  • 规则2: @media only screen and (max-width: 330px) {…}

指「width小于或者等于max-width,采用{…}的样式」

如果width是320px,这条规则会返回true,浏览器会解析这段规则中的CSS样式。这种情况翻译过来就是:

[如果320px小于或者等于330px,采用{…}的样式」

问题2:有width为310px, 320px, 330px, 340px, 350px的视口,哪些视口会采用以上规则(指代规则2中{…}的CSS样式)?

这条规则会更加容易理解,简单解释就是:视口宽度在min-width和max-width之间的,都会采用这条规则。

  • 规则3:@media only screen and (min-width: 330px) and (max-width: 350px) {…}

如果width为340px, 这条规则返回true。翻译过来就是:

「如果340px330px350px之间,采用{…}的样式」

问题3:有width为310px, 320px, 330px, 340px, 350px的视口,哪些视口会采用以上规则(指代规则3中{…}的CSS样式)?

实例:

body {    background-color: gray;  }  @media screen and ( max-width: 960px ) {   body { background-color: red; } }  @media screen and ( max-width: 768px ) {   body { background-color: orange; } }  @media screen and ( max-width: 550px ) {   body { background-color: yellow; } }  @media screen and ( max-width: 320px ) {   body { background-color: green; } }

这条规则翻译过来就是:

1. 显示灰色背景; 2. width为0-960px的,显示红色背景; 3. width为0-768px的,显示橙色背景; 4. width为0-550px的,显示黄色背景; 5. width为0-320px的,显示绿色背景;

需要提醒一下的是CSS的优先级概念,在样式表中越后的样式优先级越高,就是后面的样式会覆盖前面的样式。在这个例子中,我们先设定了默认颜色为灰色。如果width大于960px的,会显示灰色。

假设width为750px,会先匹配到灰色,再匹配红色,最终显示了橙色。由于width等于750px,它不在0-550px和0-320px这个范围,浏览器不会解析这些样式。


  • 8
    点赞
  • 20
    收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值