屏幕分辨率判断

最新推荐文章于 2021-06-07 13:13:27 发布

weixin_33736649

最新推荐文章于 2021-06-07 13:13:27 发布

阅读量201

点赞数

CC 4.0 BY-SA版权

文章标签： c# javascript ViewUI

原文链接：http://www.cnblogs.com/su1637/p/8258612.html

本文介绍了一种基于屏幕宽度的分辨率适配方案，通过检测屏幕宽度动态加载不同的CSS文件实现页面布局调整，适用于不同分辨率的显示设备。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
 5 <title>分辨率解决方法一</title>
 6 <link href="css/styles.css" id="styles" rel="stylesheet" type="text/css">
 7 </head>
 8 
 9 <body style="overflow-x:hidden">
10 <!-- 顶部导航 -->
11 <div class="w1_2 color">
12       <ul id="ulc">
13           <li class="li1 selected"></li>
14           <li class="li2"></li>
15           <li class="li3"></li>
16       </ul>
17 </div>
18 <div class="w1_2">
19           <div class="top">
20                <p id="text">头部w1200_w1000</p>
21           </div>
22           
23           <div class="main cl">
24                   <div class="main_left">
25                        内容左边w900_w700
26                   </div>
27                   <div class="main_right">
28                         内容右边w280
29                   </div>       
30           </div>
31           <div class="main cl">
32                   <div class="main_left">
33                        内容左边w900_w700
34                   </div>
35                   <div class="main_right">
36                         内容右边w280
37                   </div>       
38           </div>
39           <div class="main cl">
40                   <div class="main_left">
41                        内容左边w900_w700
42                   </div>
43                   <div class="main_right">
44                         内容右边w280
45                   </div>       
46           </div>
47           
48           <div class="footer">
49                 页脚w1200_w1000
50           </div>
51 </div>
52 <script type="text/javascript">
53 window.onload=function(){
54     var sc=document.getElementById("styles");
55     var text=document.getElementById("text");
56     if(screen.width>1024)  //获取屏幕的的宽度
57     {
58       sc.setAttribute("href","css/styles.css");   //设置css引入样式表的路径
59       text.innerHTML = "你的电脑屏幕宽度大于1024,宽度是 1200px, 很给力哦";
60     }
61     else{
62      sc.setAttribute("href","css/styles1.css");
63      text.innerHTML = "你的电脑屏幕宽度小于或是等于1024，宽度是 1000px, 可以换换显示器了。";
64     }
65     }
66 </script>
67 </body>
68 </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{ width:100%; width: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{ width: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; width: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; width:900px; height:200px; line-height:200px; background:#063; text-align:center; font-family:"微软雅黑"; font-size:36px; color:#FFF;}
.main_right{ float:right; width: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;}