我目前有一个Web应用程序，使用Themes将其设置为SkinA或SkinB。到目前为止，这是一个没有以任何方式关注移动设备的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);
最后，使用移动浏览器的其他样式定义另一个样式表handheld.css，并将其链接到页面上：
<link rel="stylesheet" href="core.css" media="screen"/>
<link rel="stylesheet" href="handheld.css" media="handheld, only screen and (max-device-width:480px)"/>
或许有更好的方法来实现这一点，同时保留主题的使用？
答案 0 :(得分：0)
我在目前正在做的一个项目中遇到过这个问题。
您可以使用Modernizr。
这是一个javascript库，你可以在modernizr.com上获得。
它将测试目标浏览器，如果它支持触摸事件，它将为您的网页元素添加一种“触摸”样式。一般来说，如果Modernizr这样做，它可能是平板电脑或手机。然后，使用“.touch”为手机/平板电脑css的每种风格添加前缀。
将此与媒体查询相结合，您应该能够处理大部分（可能不是全部）设备。