根据不同的显示器分辨率使用不同样式文件

快乐打工仔 分类:实例代码

根据不同的显示器分辨率使用不同样式文件属于前端实例代码,有关更多实例代码大家可以查看

现在显示器的分辨率各有不同,如果要追求完美的话,需要根据显示器不同的分辨率调用不同的样式,下面就简单介绍一下如何实现此功能,先看一段代码实例:

<!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属性值,这样就实现了设置不同的样式效果。

根据不同的显示器分辨率使用不同样式文件,这样的场景在实际项目中还是用的比较多的,关于根据不同的显示器分辨率使用不同样式文件就介绍到这了。

回复

我来回复
  • 暂无回复内容