jquery - 改造旧的 XHTML 网站以适应移动设备？

Question

我有一个旧网站需要快速移动升级。我对此进行了研究，并找到了许多关于在开始新元素时如何做到这一点的很好的答案。我很好奇是否有人有这样做的经验，如果有的话，什么方法最适合这种工作？我尝试了 Modernizer，但无法让它在任何媒体查询上返回 true (Modernizer.mq)

这是我尝试过的代码:

Modernizr.load([
 {
test : Modernizr.mq('screen and max-device-width: 480px'),
yep : 'css/mobile.css',
    nope : 'css/styles.css'
 ]); 

Answer 1

有效的媒体查询仅限屏幕和(最大设备宽度:480px)。

only 用于修复我现在不记得的错误，但它不会破坏其他浏览器中的任何内容，所以没关系。

您必须将最大宽度规范括在括号内。

但是，您不应该依赖 Javascript 来加载 css 文件。您可以将它们包含在

<link rel="stylesheet" type="text/css" href="mobile.css" media="only screen and (max-device-width: 480px)"
<link rel="stylesheet" type="text/css" href="screen.css" media="only screen and (min-device-width: 481px)"

您可能需要非媒体查询支持浏览器的后备。