了解Retina设备CSS媒体查询 [英] Understanding Retina device CSS Media queries
问题描述
我正在处理一个WordPress主题,并尝试将视网膜启用的CSS查询合并到我的CSS文件中。
I am working on a WordPress theme and am trying to incorporate retina enabled CSS queries into my CSS file.
我想澄清一下,我有媒体
I would just like to clarify that I have the media queries set up correctly before I change out all my background images.
- 我已将所有背景图片的大小加倍,并加上了
他们用@ 2x命名约定。icon-user@2x.png
。 - 我在我的代码中添加了一个jQuery函数,
- 在我的CSS文档中,我有一个背景图像的普通CSS类。
常规CSS查询
.side-nav .arrow {
background: url(../images/arrow-nav.png) no-repeat top left;
width: 5px;
height: 8px;
display: inline-block;
margin-left: 10px
}
这是正确的方式,我会更改.side-nav .arrow类为视网膜启用设备?当声明背景尺寸时,我保持原始较小图像的尺寸?
Is this the correct way i would change the .side-nav .arrow class for a retina enabled device? When declaring the background size do I keep the size that of the original smaller image?
/* All Retina Ready devices larger than 1.5 pixel ratio */
@media only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
.side-nav .arrow {
background-image:url(../images/arrow-nav@2x.png);
-webkit-background-size:5px 8px;
-moz-background-size:5px 8px;
-o-background-size:5px 8px;
background-size:5px 8px
}
}
strong> jQuery代码
jQuery Code
$(function () {
if (window.devicePixelRatio == 2) {
var images = $("img.hires");
/* loop through the images and make them hi-res */
for(var i = 0; i < images.length; i++) {
/* create new image name */
var imageType = images[i].src.substr(-4);
var imageName = images[i].src.substr(0, images[i].src.length - 4);
imageName += "@2x" + imageType;
/* rename image */
images[i].src = imageName;
}
}
});
谢谢
推荐答案
只要有某种形式的缩放,就像您声明
As long as there is some form of scaling taking place, like when you declare
< meta name =viewport content =width = ...>
(适用于android / ios / blackberry / WP8)
<meta name="viewport" content="width=...">
(for android/ios/blackberry/WP8)
或
@ ms-viewport {width:...;}
(适用于非WP8 IE10)
@ms-viewport {width: ... ;}
(for non-WP8 IE10)
或...即使您没有声明任何东西,默认情况下,移动设备会自动缩放为viewport width = 980px
or ... even if you declare nothing most mobile devices will by default automatically scale such that viewport width=980px
使用'px'声明将以与它们的视口相同的比例存在,而不管它们的物理DPI / PPI
then all CSS dimensions you declare with 'px' will exist in the same proportion to their viewport regardless of differences between their physical DPI/PPI
之间的差异,这意味着你不应该改变单个事物关于您的样式类,但媒体查询匹配高分辨率设备时的背景图片的网址:
this means you shouldn't have to change a single thing about your style class except the background image's URL when the media query matches a high res device:
@media only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 144dpi) {
.side-nav .arrow {
background-image:url(../images/arrow-nav@2x.png);
}
}
这篇关于了解Retina设备CSS媒体查询的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!