c# - 设备响应式 CSS

Question

这可能看起来与大多数其他问题相似，但似乎无法找到这个确切的解决方案？？

我想要一个响应设备最大宽度的网页设计，这样当普通浏览器用户最小化他的网页时，它只是常规网站，但是当你从手机进入时，你会看到移动网站(但它仍然是用 css 完成的)atm 我有这个:

<link href="<%= AutoVersioning.VersionizePath("/css/all.css") %>" rel="stylesheet" type="text/css" media='screen and (min-width: 480px)' />
<link href='/css/mobile.css' rel='stylesheet' type="text/css" media='screen and (min-width: 0px) and (max-width: 480px)' />

这是这里的简单方法，它要求浏览器宽度而不是设备宽度..

所以总结了我如何请求设备宽度以及如何使用它来选择 css 表？

编辑*

我发现我想询问该设备是否是移动设备，如果是，则使用另一个样式表，因为现在似乎很多手机都超过 480 像素

Answer 1

你可以试试这个

<link href  ="all.css" rel="stylesheet" />
<link href  ="/css/mobile.css" rel='stylesheet'
      media ='screen and (max-device-width: 480px)' />

加载 all.css 桌面和移动设备的通用规则，然后恢复以前的规则或在 mobile.css 上添加新规则检查 max-device -宽度

参见 jsbin 示例:http://jsbin.com/emafuk/1/edit
即使您调整桌面浏览器的大小，也不会应用使用 max-device-width 定义的规则