0

我目前有一个使用主题将其作为 SkinA 或 SkinB 皮肤的 Web 应用程序。到目前为止，这一直是一个没有以任何方式专注于移动设备的 Web 应用程序，因此 site.css 文件（在两个 Theme 文件夹中）针对的是普通桌面设备。

但是，在不更改整个项目中的任何 Web 表单 aspx 文件的情况下，我现在需要创建这个 site.css 文件的移动版本（对于两个主题），它将改变布局，以便在查看时看起来更干净一点移动设备。

我在一篇听起来很合乎逻辑的文章中找到了以下片段，但是，由于使用了 Themes 文件夹（根据我对主题的了解，我认为所有 CSS 文件都会自动包含在内），我不确定我将如何完成这个。

摘自：http: //mobile.smashingmagazine.com/2010/11/03/how-to-build-a-mobile-website/#mobile-stylesheets

首先，定义两个样式表：screen.css 包含普通浏览器的所有内容，antiscreen.css 覆盖移动设备上不需要的任何样式。将这两个样式表绑定在另一个样式表 core.css 中：

@import url("screen.css");
@import url("antiscreen.css") handheld;
@import url("antiscreen.css") only screen and (max-device-width:480px);

最后，为移动浏览器定义另一个带有额外样式的样式表held.css 并将它们链接到页面上：

<link rel="stylesheet" href="core.css" media="screen"/>
<link rel="stylesheet" href="handheld.css" media="handheld, only screen and (max-device-width:480px)"/>

或者也许有更好的方法来实现这一点，同时保留主题的使用？

4

1 回答 1

0

我在我目前正在做的一个项目中遇到了这个问题。

一种方法是使用 Modernizr。

这是一个 JavaScript 库，您可以在 modernizr.com 上获得。

它将测试目标浏览器，如果它支持触摸事件，它将为您的网页元素添加一种“触摸”样式。一般来说，如果 Modernizr 这样做，它要么是平板电脑，要么是手机。然后，您在手机/平板电脑 css 的每种样式前加上“.touch”。

将此与媒体查询相结合，您应该能够处理大多数（可能不是全部）设备。

于 2013-02-28T14:40:33.520 回答