css具有媒体响应功能,可以判断屏幕宽度,从而加载设置的css
如下代码,当宽度小于1000px的时候加载css下的css-mobile.css
<link href="css/css-mobile.css" rel="stylesheet" type="text/css" media="screen and (max-width: 1000px)">如下代码,当宽度大于1000px的时候加载css下的css-pc.css
<link href="css/css-pc.css" rel="stylesheet" type="text/css" media="screen and (min-width: 1000px)">根据不同分辨率或不同窗口大小加载不同的css,让网页显示最合适的布局,是网站设计常用到的。一、根据屏幕分辨率大小加载不同CSS.
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<link href="" rel="stylesheet" type="text/css" id="css" /><!--备注:这里写一个带ID="css" 的空的link样式-->
<script>
var w=window.screen.width//先获取屏幕分辨率大小
var c
if(w==1280){
c="a.css"
}else if(w==1024){
c="d.css"
}else if(w==800){
c="c.css"
}else{
c="d.css"
}
document.getElementById("css").href=c
</script>
</head>
<body>正文</body>
</html>
二、根据浏览器窗口大小加载不同CSS
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<link href="" rel="stylesheet" type="text/css" id="css" /><!--备注:这里写一个带ID="css" 的空的link样式-->
<script>
var w=document.documentElement?document.documentElement.clientWidth:document.body.clientWidth//先获取窗口宽度
var c
if(w>=1280){
c="a.css"
}else if(w>=1024){
c="d.css"
}else if(w>=800){
c="c.css"
}else{
c="d.css"
}
document.getElementById("css").href=c
</script>
</head>
<body>正文</body>
</html>