移动设备上的媒体查询 CSS media queries for mobile device

小咪咪 2022-08-24 04:18 176阅读 0赞

现在试图解决android平板的屏幕分辨率问题，目前主要想到的办法是采用响应式设计和媒体查询，发现无论使用那种方式，工作量都很大，调试都困难，悲催啊。

CSS的媒体查询虽然在传统的互联网页面可能发挥的余地不是很大，但是自从苹果和安卓的风靡之后，移动平台上的web开发变得越来越流行了，同时CSS的媒体查询可谓派上了大用场了。

以下为翻译内容，原文来自这里 非常棒的一篇文章

关于CSS media queries想了解更多，参看这里

**如何使用Media Queries媒体查询:**

媒体查询就像是一个CSS选择器或者如果你接触过数据库的话，就像是SQL查询语句。媒体查询实际上就是一种语法规

则，可以方便的从一大堆元素里获取几个元素。这样就方便你应对一些特定的尺寸或者指定一些特殊的解决方案了。媒体

查询的代码可以放在<head>元素里，也可以放在styleSheet样式表里的任何地方。但是需要注意的是，在任何时候，媒体查

询都必须以关键字media开头，后面跟你要显示的css样式。

**（一）放在head标签中的写法如下：**

** **

**（二）放在styleSheet样式表的写法如下：**

@media only screen and (max-device-width:480px)\{/\*css样式\*/\}

【注意事项】：上面的两种写法都是针对老版iphone的解决方案（320x480的解决方案）。当然，不是说让你两个都用，

只要挑选适合你需求的那个写法来用就可以了 。

利用媒体查询来覆盖CSS样式

这个用法在移动设备上和常用，主要是用来呈现高清图的。也就是说，现在我们有一张两倍于显示尺寸的图片，但可显示的区域只有图片的一半。解决方式就是利用上面说的媒体查询和background-size来实现。

** **

**下面主要介绍以下的几种设备的解决方案：**

** **

**（一）iOS 设备**

1. iPhone 4

iPhone4上你就不能使用device-height或者device-width来设置媒体查询的条件，因为iPhone4的屏幕大小也是320x480的，跟老版本的iPhone和iPod是一样的。iPhone 4上的像素密集程度是两倍于我们视网膜的呈现的，所

以在iPhone 4设备上要呈现出来的话需要两倍于我们眼睛实际看到的尺寸的图片（也就是我们通常所说的高清晰 图标的效果）。要实现这个效果，不能用height或者width，而要使用属性-webkit-min-device-pixel-ratio这个属性。不过，需要提醒的一点，这里仅仅是针对webkit内核的浏览器，所以在其他内核的浏览器上不适用哦。使用方法如下：

@media only screen and (-webkit-min-device-pixel-ratio:2)\{/\*针对iphone4的css样式\*/\}

2. iPhone 3 和 iPod(320x480像素的解决方案)  
@media only screen and (max-device-width:480px)\{/\*针对iPhone 3和iPod的css样式\*/ \}

3.iPad

iPad上要使用device-width而不是max-device-width,并且可以设置横屏和竖屏模式  
@media only screen and (device-width:768px)\{/\*针对ipad的css样式\*/\}

@media only screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:portrait)\{/\*ipad竖屏的css样式\*/\}

@media only screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:landscape)\{/\*ipad横屏的css样式\*/\}

** **

**（二）Android设备**

Android设备最奇妙也是最让人头疼的地方就是支持太多的屏幕显示尺寸。在某种意义上，对手持设备的制造厂商来说肯定是件好事，但是可苦了图形设计师们了。设计师们不得不做好几种尺寸的图片来满足最大众的需求。当然这也是兴趣所在了。长话短说，Android设备上可以创建三种不同密度的图片：low、media和high。创建这三种效果的图片可以使用如下的媒体查询方式：

@media only screen and (-webkit-device-pixel-ratio:.75)\{/\*低分辨率小尺寸的图片样式\*/\}  
@media only screen and (-webkit-device-pixel-ratio:1)\{/\*普通分辨率普通尺寸的图片样式\*/\}  
@media only screen and (-webkit-device-pixel-ratio:1.5)\{/\*高分辨率大尺寸的图片样式\*/\}

** **

**（三）Windows Phone 7**  
到这篇文章为止，Windows Phone 7的媒体查询是受限制的，参见这里，在WP7上你不能使用initial-scale, maximum-scale,minimum-scale这些属性，因为在所有的WP7设备上都会显示是320px的宽度。但是不要气馁，其实我们还是可以在WP7上使用媒体查询的，只要如下的写法就可以了：

结语：  
移动设备上写css是非常复杂多变的，这个不容质疑。因为有很多陷阱：没有什么很好的调试工具、迅速扩张的市场和需求的快速变化，不同设备上的支持程度不同都大大的增加了移动设备上开发的难度。