码迷,mamicode.com
首页 > Web开发 > 详细

js实现PC端与客户端自适应

时间:2019-09-11 09:18:59      阅读:130      评论:0      收藏:0      [点我收藏+]

标签:var   styles   width   ntb   定义   sheet   hang   class   div   

我们可以通过js来判断页面对象进行显示,

在外部引入css设定ID

1 <link rel="stylesheet" id="css" type="text/css" href="css/pc.css"/>

js代码如下

var newDoc=document.open("text/html","replace"); //重新加载引入
        window.onload=function(){
            //进入判断页面
             changeDivHeight();
        }
        window.onresize=function(){
            //监听页面宽度值
             changeDivHeight();
        }
             //执行判断命令
             function changeDivHeight(){    
                   //获取body的宽度            
                    var h = document.body.clientWidth 
                    if(h < 800)
                    {
                    //移动端    
                    document.getElementById(‘css‘).href=‘css/web.css‘  //客户端
                    
                    newDoc.close();
                    }
                    else
                    {
                    //PC端
                    document.getElementById(‘css‘).href=‘css/pc.css‘  //PC端
                    newDoc.close();
                    }
        }

我用的方法是通过js来判断页面的高度来定义大小,我这边设定是宽度800px,超过800我这边设定为PC端页面,引入pc.css,宽度小于800px,我这边设定为web端也就是手机进行显示引入web.css。

js实现PC端与客户端自适应

标签:var   styles   width   ntb   定义   sheet   hang   class   div   

原文地址:https://www.cnblogs.com/zhaolipeng/p/11504224.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!