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


         如今试图解决android平板的屏幕分辨率问题,眼下主要想到的办法是採用响应式设计和媒体查询,发现不管使用那种方式,工作量都非常大,调试都困难,悲催啊。

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

    下面为翻译内容,原文来自这里 很棒的一篇文章

     

    关于CSS media queries想了解很多其它,參看这里


    怎样使用Media Queries媒体查询:

     

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

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

    查询的代码能够放在<head>元素里,也能够放在styleSheet样式表里的不论什么地方。可是须要注意的是,在不论什么时候,媒体查

    询都必须以keywordmedia开头,后面跟你要显示的css样式。

     

     

    (一)放在head标签中的写法例如以下:

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

     

     

    (二)放在styleSheet样式表的写法例如以下:

    @media only screen and (max-device-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-480px){/*针对iPhone 3和iPod的css样式*/ }

     

    3.iPad

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

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

    @media only screen and (min-device-481px) and (max-device-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是非常复杂多变的,这个不容质疑。由于有非常多陷阱:没有什么非常好的调试工具、迅速扩张的市场和需求的高速变化,不同设备上的支持程度不同都大大的添加了移动设备上开发的难度。

  • 相关阅读:
    leetcode-19-merge
    leetcode-18-remove
    R-codes-tips
    python-bioInfo-codes-2
    Java-framework-Vaadin
    leetcode-17-BST
    生物信息学-知识笔记-1
    leetcode-16-greedyAlgorithm
    perl-tips-1
    计算机网络HTTP、TCP/IP包
  • 原文地址:https://www.cnblogs.com/gcczhongduan/p/4276527.html
Copyright © 2020-2023  润新知