<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>分辨率解决方法一</title>
<link href="css/styles.css" id="styles" rel="stylesheet" type="text/css">
</head>
<body style="overflow-x:hidden">
<!-- 顶部导航 -->
<div class="w1_2 color">
<ul id="ulc">
<li class="li1 selected"></li>
<li class="li2"></li>
<li class="li3"></li>
</ul>
</div>
<div class="w1_2">
<div class="top">
<p id="text">头部w1200_w1000</p>
</div>
<div class="main cl">
<div class="main_left">
内容左边w900_w700
</div>
<div class="main_right">
内容右边w280
</div>
</div>
<div class="main cl">
<div class="main_left">
内容左边w900_w700
</div>
<div class="main_right">
内容右边w280
</div>
</div>
<div class="main cl">
<div class="main_left">
内容左边w900_w700
</div>
<div class="main_right">
内容右边w280
</div>
</div>
<div class="footer">
页脚w1200_w1000
</div>
</div>
<script type="text/javascript">
window.onload=function(){
var sc=document.getElementById("styles");
var text=document.getElementById("text");
if(screen.width>1024) //获取屏幕的的宽度
{
sc.setAttribute("href","css/styles.css"); //设置css引入样式表的路径
text.innerHTML = "你的电脑屏幕宽度大于1024,宽度是 1200px, 很给力哦";
}
else{
sc.setAttribute("href","css/styles1.css");
text.innerHTML = "你的电脑屏幕宽度小于或是等于1024，宽度是 1000px, 可以换换显示器了。";
}
}
</script>
</body>
</html>
@charset "gb2312";
/* CSS Document */
body,div,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,tr,td,input,p,span,img,b,i,em,strong,a{ margin:0; padding:0;}
img{ margin:0; padding:0; border:0; vertical-align:top;}
ul,li{list-style:none;}
body{ font-family:"宋体",Arial,Verdana,Helvetica,sans-serif; font-size:12px;}
a{text-decoration:none;}
table{ 100%; 100% !important;}
.cl:after{content:'20';display:block;height:0;clear:both}
.cl{*zoom:1}
.color{ height:40px; background:#999;}
.color ul{ float:right;}
.color ul li{ 20px; height:20px; float:left; margin:10px; cursor:pointer;}
.color ul li.li1{ background:#333;}
.color ul li.li2{ background:#090;}
.color ul li.li3{ background:#C63;}
.color ul li.selected{box-shadow:2px 2px 2px #999999;}
.w1_2{ clear:both; 1200px; margin:0 auto;}
.top{ height:100px; line-height:100px; background:#060; text-align:center; font-family:"微软雅黑"; font-size:36px; color:#FFF;}
.main{ height:200px; margin-top:20px; clear:both;}
.main_left{ float:left; 900px; height:200px; line-height:200px; background:#063; text-align:center; font-family:"微软雅黑"; font-size:36px; color:#FFF;}
.main_right{ float:right; 280px; height:200px; line-height:200px; background:#066; text-align:center; font-family:"微软雅黑"; font-size:36px; color:#FFF;}
.footer{ height:100px; line-height:100px; background:#069; text-align:center; font-family:"微软雅黑"; font-size:36px; color:#FFF; margin-top:20px;}