如何根据分辨率调用不同的css文件

html-css018

如何根据分辨率调用不同的css文件,第1张

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>