通过min-width的设置,我们可以在浏览器窗口或设备屏幕宽度高于这个值的情况下,为页面指定一个特定的样式表;max-width则反之
如下面代码:
<style> /* max-width 宽度小于 600px*/ @media screen and (max-width:600px){ .one{background:#F9C;} span.lt600{display:inline-block;} } /* min-width 宽度大于 900px*/ @media screen and (min-width:900px){ .two{background:#F90;} span.gt900{display:inline-block;} } /* min-width & max-width 宽度在 600px 到 900px 之间*/ @media screen and (min-width:600px) and (max-width:900px){ .three{background:#9CF;} span.bt600-900{display: inline-block;} } /* max device width 设备最大宽度为 480px*/ @media screen and (max-device-width:480px){ .iphone{background:#ccc;} } </style>
有些时候,我们希望通过media queries作用于某种特定的设备,而忽略其上运行的浏览器是否由于没有最大化而在尺寸上与设备屏幕尺寸产生不一致的情况。这时,我们需要使用min-device-width与max-device-width,用来判断设备本身的屏幕尺寸。
代码如下:
@media screen and (max-device-width: 480px) { .classForiPhoneDisplay { font-size: 1.2em; } } @media screen and (min-device-width: 768px) { .minimumiPadWidth { clear: both; margin-bottom: 2px solid #ccc; } }
iPhone4
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />上面的样式是专门针对iPhone4的移动设备写的。
iPad
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" type="text/css" />
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" type="text/css" />
在大数情况下,移动设备iPad上的Safari和在iPhone上的是相同的,只是他们不同之处是iPad声明了不同的方向,比如说 上面的例子,在纵向(portrait)时采用portrait.css来渲染页面;
在横向(landscape)时采用landscape.css来渲 染页面。
android
/*240px的宽度*/
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />
/*360px的宽度*/
<link rel="stylesheet" media="only screen and (min-device-width:241px) and (max-device-width:360px)" href="android360.css" type="text/css" />
/*480px的宽度*/
<link rel="stylesheet" media="only screen and (min-device-width:361px) and (max-device-width:480px)" href="android480.css" type="text/css" />
我们可以使用media query为android手机在不同分辨率提供特定样式,这样就可以解决屏幕分辨率的不同给android手机的页面重构问题。
相关推荐
NULL 博文链接:https://liuna718-163-com.iteye.com/blog/1880369
NULL 博文链接:https://axl234.iteye.com/blog/1833406
微软的最新浏览器IE8及以下IE版本对HTML5标签的支持是有限的,我们可以通过在网页中添加脚本的方式来解决目前IE浏览器对HTML5支持的问题。 让IE(包括IE6)支持HTML5元素,我们需要在HTML头部添加... !–[if IE]> ...
主要简单介绍了CSS3中Media Query的使用,包括其中一些常用的属性功能,需要的朋友可以参考下
CSS3参考手册(css3语法使用查询手册)CHM版,可快速索引和搜索CSS3各种属性值以及具体的用法,说详细介绍有CSS3选择器的各方面知识,这包括UI元素状态伪类 E:checked、结构性伪类 E:nth-of-type(n)、子串匹配的属性...
使用CSS3-Media-Query技术适配Android平板屏幕分辨率和屏幕密度.docx
主要是我们将了解一下怎样通过html5和css3 Media Queries(媒介查询)相关技术来实现跨设备跨浏览器的响应式web设计方案
CSS查询手册CSS查询手册CSS查询手册CSS查询手册CSS查询手册CSS查询手册CSS查询手册CSS查询手册CSS查询手册CSS查询手册CSS查询手册CSS查询手册
IE8及低版本浏览器不支持CSS3 media queries的解决方法
CSS3实现烟花特效-图片+css
html5+css3 开发参考手册,和大家分享
主要介绍了CSS3的media query学习攻略,media query的媒体查询经常被用于设计响应式网页,需要的朋友可以参考下
css3参考手册,走过路过不要错过哈。css3参考手册 css3参考手册
iecss3.htc css3圆角支持文件
css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css...
on-media-query, 当媒体查询改变时触发JS的简洁方法 不需要 jQuery Javascript onMediaQuery当媒体查询改变时触发JS的简洁方法。Jeremy Keith最近发布了一种让CSS和Javascript能够用 CSS :after 伪属性来讨论媒体...
css3速查表css3速查表css3速查表