首页 > 代码库 > 检测屏幕宽度，更换样式表

检测屏幕宽度，更换样式表

2024-07-04 07:19:52   223人阅读

一、通过js检测屏幕宽度，更换样式表

1、javascript更改页面样式表的方法

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javascript更改页面样式表的方法</title>
<link id="mylink" rel="stylesheet" href="1.css" type="text/css" /> 
<script type="text/javascript">
    window.onload=function(){
        var mybut = document.getElementById("changecss");
        var mylink = document.getElementById("mylink");
        mybut.onclick=function(){            //在按钮上绑定点击事件，当点击按钮的时候link的href的值改变，即可实现更换样式表（换肤效果也是这样的原理）
                mylink.href="2.css";
        };
    };
</script>
</head>

<body>
     <input id="changecss" type="button" value="点击我更改样式表" />
</body>
</html>

 

 

 

2、javascript得到页面的宽度（document.documentElement.clientWidth;(IE6兼容的写法 )）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javascript检测浏览器宽度</title>
</head>

<body>
    <h1 id="shuchu"></h1>
    <script type="text/javascript">
        window.onresize=function(){                //onresize表示当浏览器页面被改变时（即调整尺寸的时候）触发该事件
            document.getElementById("shuchu").innerHTML = 
            document.documentElement.clientWidth;
        }
        
    </script>
</body>
</html>

 

 

3、js检测宽度更换样式表

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javascript检测浏览器宽度</title>
<link id="mylink" rel="stylesheet" type="text/css" href="1.css" />
<script type="text/javascript">
    //更换样式表，需要在页面加载的时候执行一次
    //在浏览器尺寸变化的时候，也要执行
    
        gaibian();//一加载，就执行一次gaibian函数，这样就能保证页面默认情况就显示合理的样式表(否则当屏幕一开始小于600时，一加载页面显示的是默认的样式，要刷新一次才能跟换到合理的样式)
        
        window.onresize=gaibian;
        
        function gaibian(){
            var kuandu = document.documentElement.clientWidth;//获取浏览器的宽度
            
            var mylink = document.getElementById("mylink");
            //得到宽度之后就可以通过判断浏览器的宽度来加载哪个样式表了
            if(kuandu>600){
                mylink.href="1.css"
            }else{
                mylink.href="2.css"
            }
        }
</script>
</head>

<body>
</body>
</html>

 

 

 

二、视口

当我们试图在iPhone中输出屏幕宽度的时候，会发现屏幕宽度是980，居然和pc屏幕宽度差不多大

苹果主导的这些手机厂商，为了使用户获得完整的WEB体验，很多设备都会欺骗浏览器返回一个数值较大的视口，告诉浏览器，别以为我身子小，但是我想以980px宽度显示这个页面（分辨率和视口没有关系（开发中根据视口来算的））

 

视口对于我们实现响应式是很不方便的。980太大了，不符合我们心中的期待，我们心中认为手机屏幕尺寸应该在320到400之间    

解决这个问题只要约束视口即可：

<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport" />

 

一个id和name为 viewport的meta元标记，就表示现在要约束视口了。

那么具体约束的规则写在content中，每个约束规则用逗号隔开：

　　width=device-width　　　　命令视口的宽度，变为设备的宽（以1024*768屏幕为标准 iPhone等手机通常为320到380之间）

　　initial-scale=1.0　　　　　　命令视口默认的缩放等级为1

　　minimum-scale=1.0　　　　命令视口最小缩放等级为1

　　maximum-scale=1.0　　　　命令视口最大缩放等级为1

　　user-scalable=no　　　　　　不允许用户缩放页面

 

所有的手机响应式网站，都要加上meta viewport视口约束标记

 

 

 

 三、CSS3中媒体查询来更换样式表

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport" />
<title>媒体查询</title>
<link id="mylink" rel="stylesheet" type="text/css" href="1.css" media="(min-width:600px)"/>
<link id="mylink" rel="stylesheet" type="text/css" href="2.css" media="(max-width:599px)"/>
</head>

<body>
</body>
</html>

 

查看效果，在没写一句js代码的情况下，也能根据宽度来更换样式表了，这是因为上面代码在link标签中使用了CSS3媒体查询 meadia属性就是媒体查询的属性

min-width:600px;   表示宽度大于等于600px的时候用这个样式表
max-width:599px;   表示宽度小于等于599px的时候用这个样式表
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport" />
<title>媒体查询</title>
<link id="mylink" rel="stylesheet" type="text/css" href="1.css" media="(min-width:800px)"/>
<link id="mylink" rel="stylesheet" type="text/css" href="2.css" media="(max-width:799px) and (min-width:600px)"/>
<link id="mylink" rel="stylesheet" type="text/css" href="3.css" media="(max-width:599px)"/>
</head>

<body>
</body>
</html>
max-width:799px) and (min-width:600px);   表示宽度小于等于799px到600px大于等于之间使用这个样式表

媒体查询IE9才开始支持的以下的不支持，javascript检测宽度更换样式表，是IE6也兼容的 

 

 

媒体查询是CSS3中新的特性。还可以用在内嵌式

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport" />
<title>媒体查询</title>
<link id="mylink" rel="stylesheet" type="text/css" href="1.css" media="(min-width:800px)"/>
<link id="mylink" rel="stylesheet" type="text/css" href="2.css" media="(max-width:799px) and (min-width:600px)"/>
<link id="mylink" rel="stylesheet" type="text/css" href="3.css" media="(max-width:599px)"/>

<style type="text/css">
····/*当页面宽度大于等于800的时候就用该样式修饰div*/
    @media(min-width:800px){
        div{ width:200px; height:200px; background:red;}    
    }
    /*当页面宽度小于等于799的时候就用该样式修饰div*/
    @media(max-width:799px){
        div{ width:100px; height:400px; background:blue;}    
    }
</style>
</head>

<body>
    <div></div>
</body>
</html>

 


联系
我们