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

时间：2022-09-25 09:02:11

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

以下为翻译内容，原文来自这里 非常棒的一篇文章，爱死我了，tks Adam！

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

如何使用Media Queries媒体查询:

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

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

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

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

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

<link rel="stylesheet" type="text/css"     href="xxx.css" media="only screen and (max-device-width:480px)">

 

（二）放在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上使用媒体查询的，只要如下的写法就可以了：

<!--[if IEMobile 7]><link rel="stylesheet" type="text/css" href="xxx.css" media="screen"><![endif]-->

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

移动设备上的媒体查询 CSS media queries for mobile device的更多相关文章

  1. 媒体查询漫谈——&commat;media Queries

    通过不同的媒体类型和条件定义样式表规则.媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件.媒体查询的大部分媒体特性都接受min和max用于表达”大于或等于”和”小与或等于”.如:wi ...

  2. CSS3媒体查询（Media&&num;160&semi;Queries）

    媒体类型: all 所有设备 screen 电脑显示器 handheld 便携设备 tv 电视类型设备 print 打印用纸打印预览视图 关键字 and not(排除某种设备) only(限定某种设备 ...

  3. 解决ie9以下下不支持html5和媒体查询（Media Queries）

    ie9以下不支持媒体查询和html5,可以使用补丁完美兼容 1.html5shiv ie6~8不识别html5的新元素,可以通过使用html5shiv来解决 <!--[if lt IE 9]&g ...

  4. &lbrack;CSS3&rsqb; CSS Media Queries

    Using CSS media queries allows you to design responsive layout in your web apps and website. We will ...

  5. css&colon;Media Queries&colon; How to target desktop&comma; tablet and mobile&quest;

    <!doctype html> <html> <head> <meta name="viewport" content="wid ...

  6. CSS media queries 媒体查询

    最近在做一些页面打印时的特殊处理接触到了media queries,想系统学习一下,在MOZILLA DEVELOPER NETWORK看到一篇文章讲的很不错,结合自己的使用总结一下. CSS2/me ...

  7. 关于响应式、媒体查询和media的关系 、流媒体布局flex 和em rem像素的使用 我有一些废话要讲&period;&period;&period;&period;&period;

    一.什么是响应式 随着移动端越来遇火 网站的布局成为一个热议的话题 有的人喜欢用手机浏览网站.有的人喜欢用paid浏览网站.有人喜欢用电脑浏览网站 那么问题来了 我们怎么样才能使用一套css样式 完成 ...

  8. media query&lpar;媒体查询&rpar;和media type&lpar;媒体类型&rpar;

    media type(媒体类型)是css 2中的一个非常有用的属性,通过media type我们可以对不同的设备指定特定的样式,从而实现更丰富的界面.media query(媒体查询)是对media ...

  9. 前端笔记之移动端&amp&semi;响应式（上）媒体查询&amp&semi;Bootstrap&amp&semi;动画库&amp&semi;zepto&amp&semi;velocity

    一.媒体(介)查询 1.1 基本语法 媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于检测的媒体特性有:width.height和color(等).使用媒体查询可以在不改变 ...

随机推荐

  1. tomcat有哪些性能调优方法

    前几天看见一篇介绍性能调优文章,觉得不错.特此收藏(http://blog.csdn.net/lifetragedy/article/details/7708724)

  2. Android开发-API指南-&lt&semi;activity-alias&gt&semi;

    <activity-alias> 英文原文:http://developer.android.com/guide/topics/manifest/activity-alias-elemen ...

  3. 【Python】多线程编程

    1.thread模块 2.threading模块 3.Queue模块与多线程互斥 简介: thread和threading模块允许创建和管理线程,thread模块提供了基本的线程和锁的支持,而thre ...

  4. Oracle 如何提交手册Cluster Table事务

    环境遇到ora-00600 4000错误,该目的是参与cluster table,什么我这里有以下简单的模拟.以供参考! ++++创建一个测试表 ? 1 2 3 4 5 6 7 8 9 10 11 1 ...

  5. 在Windows上使用Ubuntu共享的打印机

    Ubuntu下使用cups共享打印机, 是一种简单易用的方法.CUPS(Common UNIX Printing System,通用Unix打印系统)是Fedora Core3中支持的打印系统,它主要 ...

  6. BZOJ&period;2054&period;疯狂的馒头&lpar;并查集&rpar;

    BZOJ 倒序处理,就是并查集傻题了.. 并查集就是确定下一个未染色位置的,直接跳到那个位置染.然而我越想越麻烦=-= 以为有线性的做法,发现还是要并查集.. 数据随机线段树也能过去. //18400 ...

  7. 网页换肤：原生js与jq

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. Android常用第三方支付

    移动支付 用户使用移动的终端完成对所购买商品或者服务的支付功能;分为近场支付(蓝牙支付,刷卡,滴卡),和远程支付(网上支付,短信支付) app支付模块 常见的支付厂商-->常见的支付方式 支付宝 ...

  9. 常见的排序算法（直接插入&amp&semi;选择排序&amp&semi;二分查找排序）

    1.直接插入排序算法 源码: package com.DiYiZhang;/* 插入排序算法 * 如下进行的是插入,排序算法*/ public class InsertionSort {    pub ...

  10. 洛谷P3455 ZAP-Queries &lbrack;POI2007&rsqb; 莫比乌斯反演&plus;数论分块

    正解:莫比乌斯反演 解题报告: 传送门! 首先这题刚看到就很,莫比乌斯反演嘛,和我前面写了题解的那个一模一样的,所以这儿就不讲这前边的做法辣QAQ 但是这样儿还有个问题,就现在已知我每次都是要O(n) ...

相关文章