1

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

看起来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">
    <span class="ui-btn-inner ">
        <span class="ui-btn-text">Back</span>
        <span class="ui-icon ui-icon-arrow-l"></span>
    </span>
</a>
4

2 回答 2

1

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

根据 jQuery Mobile文档，为了使用视网膜图标，您应该使用 css 媒体查询（如果您查看jquery.mobile-1.2.0.css文件，您会注意到他们是如何完成它的。

要添加高清图标，请创建一个 36x36 像素（正好是 18 像素大小的两倍）的图标，然后添加第二个规则，该规则使用 -webkit-min-device-pixel-ratio: 2媒体查询将规则仅定位到高分辨率显示器。指定高清图标文件的背景图像并将背景大小设置为 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...
}
于 2012-11-20T17:52:46.080 回答
0

我相信你可以给主播一个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) 和 class(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); 
}

请让我知道它是否回答了您的问题，如果可以，请将其作为正确答案。

于 2013-09-24T09:20:45.823 回答