根据不同的显示器分辨率使用不同样式文件
分类：实例代码
根据不同的显示器分辨率使用不同样式文件属于前端实例代码，有关更多实例代码大家可以查看。
现在显示器的分辨率各有不同，如果要追求完美的话，需要根据显示器不同的分辨率调用不同的样式，下面就简单介绍一下如何实现此功能，先看一段代码实例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<head>
<title>前端教程网</title>
<link rel="stylesheet" id="mytest" type="text/css" href="css/css.css"/>
<script type="text/javascript">
window.onload=function(){
var mytest=document.getElementById("mytest");
var thediv=document.getElementById("thediv");
if(screen.width>1024){
mytest.setAttribute("href","css/first.css");
}
else{
mytest.setAttribute("href","css/second.css");
}
}
</script>
</head>
<body>
<div id="thediv"></div>
</body>
</html>
以上代码可以通过screen.width判断浏览器的分辨率，然后再通过setAttribute()函数设置<link>元素的href属性值，这样就实现了设置不同的样式效果。
根据不同的显示器分辨率使用不同样式文件，这样的场景在实际项目中还是用的比较多的，关于根据不同的显示器分辨率使用不同样式文件就介绍到这了。