手机屏幕自适应 不同屏幕宽度加载不同的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的设计板块中可以看到效果,网页阅览和手机阅览这段代码都不起作用,路径是对的,是哪里出了问题,这段代码这么写对不对?

首先手机的分辨率,和实际网页宽度是不一样的。不信你可以写个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。

温馨提示:答案为网友推荐,仅供参考
第1个回答  2013-12-23
<meta name="viewport" content="width=device-width, initial-scale=1.0">加上这句,,这句是告诉浏览器视口宽度等于设备屏幕宽度,且不进行初始缩放。

然后你的media才起作用。
第2个回答  2013-12-23
就是用media属性,你看看路径有没有写错,没有加载可能是路径的问题!

相关了解……

你可能感兴趣的内容

本站内容来自于网友发表,不代表本站立场,仅表示其个人看法,不对其真实性、正确性、有效性作任何的担保
相关事宜请发邮件给我们
© 非常风气网