Question

我正在开发一个基于jquery移动的网站，并为视网膜显示器设置css。 Jquery Mobile包含36px x 36px图标大小，但默认使用18px版本。我找不到要添加到按钮的jQuery Mobile类或数据属性，以使其使用36px大小。

看起来类 ui-icon-alt 使用正确的背景图像，但当我从 ui-icon 到 ui-icon-alt 。这是我正在研究的问题按钮：

<a href="#" data-icon="arrow-l" data-role="button" class="show-back ui-btn-left ui-btn ui-btn-corner-all ui-btn-icon-notext" data-iconpos="notext"> Back </a>

Answer 1

您无需为图标添加任何内容即可使用 Retina 版本。

根据jQuery Mobile docs为了使用 retina 图标，你应该使用css媒体查询（如果你看一下jquery.mobile-1.2.0.css文件你会这意味着他们是如何实现它的。

要添加高清图标，请创建一个36x36像素的图标（正好为两倍） 18像素大小），并添加第二个使用的规则 -webkit-min-device-pixel-ratio: 2媒体查询仅将规则定位到高分辨率显示。指定HD图标的背景图像文件并将背景大小设置为18x18像素，这将适合36 像素图标进入相同的18像素空间。媒体查询块可以包装多个图标规则

示例css

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ui-icon-myapp-email {
        background-image: url("app-icon-email-highres.png");
        background-size: 18px 18px;
    }
    ...more HD icon rules go here...
}

Answer 2

我相信你可以给像锚点ID一样

<a id="backBtn" href="#">
<span class="ui-btn-inner ">
    <span class="ui-btn-text">Back</span>
    <span class="ui-icon ui-icon-arrow-l"></span>
</span>

注意：如果您愿意，可以删除所有这些span和s（s）和类，并保持简单jQuery将为您处理其余的css类和布局。 实施例：

<a id="backBtn" href="#" data-icon="arrow-l" data-iconpos="notext">Back</a>

然后在你的my-custom.css中你可以编辑这个特定ID的图标url（），并且你想要的其他按钮也可以使用36px图标而不是18px。 实施例：

#backBtn .ui-icon { 
     width: 36px; 
     height: 36px; 
     background-image: url(images/icons-36-white.png); 
}

请，如果它能回答您的问题，请告诉我，如果是，请将其视为正确答案。

jQuery Mobile将“Retina”图标设置为默认值

2 个答案: