有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

js 获取屏幕分辨率(js方式不同分辨率或窗口大小加载不同的css)

javascript 炮渣日记 3周前 (11-16) 18次浏览 已收录 0个评论 扫描二维码

根据不同分辨率或不同窗口大小加载不同的CSS,让网页显示最合适的布局,是网站设计常用到的。当然现在也有CSS3的媒体查询可以设置多种分辨率,本次所采用的是JS的判断

一、根据屏幕分辨率大小加载不同CSS

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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/html; charset=utf-8" />
<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>
喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址