根据判断PC浏览器类型和手机屏幕像素自动调用不同CSS的代码

　　------------------- 1.媒体查询方法在 css 里面这样写 --------------------

　　@media screen and (min-width: 320px) and (max-width: 480px){

　　在这里写小屏幕设备的样式

　　}

　　@media only screen and (min-width: 321px) and (max-width: 1024px){

　　这里写宽度大于321px小于1024px的样式(一般是平板电脑)

　　}

　　@media only screen and (min-width: 1029px){

　　这里写pc客户端的样式

　　}

　　------------------- 2.用js根据客户端输出对应样式 --------------------

　　function loadCSS() {

　　if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|wOSBrowser|BrowserNG|WebOS)/i))) {

　　document.write('');

　　}

　　else {

　　document.write('');

　　}

　　}

　　loadCSS();

　　------------------- 3.既判断分辨率，也判断浏览器-------------------

　　应E.Qiang提议,重新完善代码，使之成为判断浏览器类型屏幕分辨率自动调用不同CSS的代码。

　　代码如下：

　　

　　解释：

　　var IE1024="";

　　var IE800="";

　　var IE1152="";

　　var IEother="";

　　引号里面分别填写，用户使用IE的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名.

　　var Firefox1024="";

　　var Firefox800="";

　　var Firefox1152="";

　　var Firefoxother="";

　　引号里面分别填写，用户使用FF的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名.

　　var Other1024="";

　　var Other800="";

　　var Other1152="";

　　var Otherother="";

　　引号里面分别填写，用户使用其他浏览器的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名.

　　例子:

　　不判断分辨率，只判断浏览器

　　实现根据浏览器类型自动调用不同CSS。

　　

　　解释：

　　如果浏览器为IE，则调用default.css

　　如果浏览器为Firefox，则调用default2.css

　　如果浏览器为其他，则调用newsky.css

　　用法：

　　放在

　　

　　前面即可。

　　只要求判断根据屏幕宽度选择不同的CSS样式表。

　　

时间：(2024-02-06 14:10:51)
本站资源均来自互联网或会员发布，如果不小心侵犯了您的权益请与我们联系。我们将立即删除！谢谢！