我目前有一个web应用程序，使用主题的皮肤，无论是SkinA或SkinB。到目前为止，这一直是一个没有以任何方式关注移动设备的web应用程序，所以site.css文件(在两个主题文件夹中)针对的是普通的桌面设备。
但是，在整个项目中没有改变任何web表单aspx文件的情况下，我现在需要创建这个site.css文件的移动版本(用于两个主题)，这将改变布局，以便在移动设备上查看时看起来更干净。
我在一篇文章中发现了以下片段，听起来相当合乎逻辑，然而，由于使用了主题文件夹(从我对主题的一点点了解来看，我认为所有的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)"/>
我在一个我正在做的项目中遇到了这个问题。
一种方法是使用Modernizr。
这是一个javascript库，你可以在modernizr.com上获得。
它将测试目标浏览器，如果它支持触摸事件，它将为你的网页元素添加一个"touch"样式。一般来说，如果Modernizr做到了这一点，它要么是平板电脑，要么是手机。然后在手机/平板电脑的css样式前加上"。touch"。
将此与媒体查询结合，您应该能够处理大多数(可能不是所有)设备。