Question

手机屏幕自适应 不同屏幕宽度加载不同的css

手机网站，关于屏幕自适应
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="css/tinyScreen.css"/>
如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。
<link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="css/smallScreen.css"/>
如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。
如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。
在dw中看的时候，是可以起效的，但是在手机上看时就没有用了，两个css中东西无法加载，有人知道是什么问题么？
好像，就是在dw的设计板块中可以看到效果，网页阅览和手机阅览这段代码都不起作用，路径是对的，是哪里出了问题，这段代码这么写对不对？

Answer 1

首先手机的分辨率，和实际网页宽度是不一样的。不信你可以写个js弹出当时的屏幕宽度。
然后，你在head里加<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">试试。
如果成功，希望你搜一下<meta name="viewport">这个的作用，可以帮助你以后更好的写手机页面。

追问

我已经在head中加过限值屏幕的宽度是物理宽度了，但是那段代码还是不管用的。为什么？

追答

我一般这样写的。
不好意思，我看不出来你哪里有问题，唯一区别是我用all你用screen。

Answer 2

<meta name="viewport" content="width=device-width, initial-scale=1.0">加上这句，，这句是告诉浏览器视口宽度等于设备屏幕宽度，且不进行初始缩放。

然后你的media才起作用。

Answer 3

就是用media属性，你看看路径有没有写错，没有加载可能是路径的问题！