时间:2021-05-26
最近看一个网站,发现显示器不同的分辨率,样式文件调用的也不一样,今天写了一个例子研究一下,
复制代码 代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" id="sc" type="text/css" href="css/c1.css"/>
<script type="text/javascript">
window.onload=function(){
var sc=document.getElementById("sc");
var d=document.getElementById("d");
if(screen.width>1024) //获取屏幕的的宽度
{
sc.setAttribute("href","css/c2.css"); //设置css引入样式表的路径
d.innerHTML = "你的电脑屏幕宽度大于1024,我的宽度是 1200px, 背景色现在是红色。";
}
else{
sc.setAttribute("href","css/c1.css");
d.innerHTML = "你的电脑屏幕宽度小于或是等于1024,我的宽度是 960px, 背景色现在是蓝色。";
}
}
</script>
</head>
<body>
<div id="d"></div>
</body>
</html>
c1.css里面的内容
复制代码 代码如下:
*{ margin:0; padding:0;}
div{ width:960px; height:400px; margin:0 auto; background:blue; color:#ffffff;}
c2.css里面的内容
复制代码 代码如下:
*{ margin:0; padding:0;}
div{ width:1200px; height:400px; margin:0 auto; background:red; color:#fff;}
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
一般我们可以通过下面的代码判断分辨率复制代码代码如下:DIVCSS教程:判断用户分辨率调用不同的CSS样式文件 (未测试来自网络请自行验证)复制代码代码如下:
既判断分辨率,也判断浏览器重新完善代码,使之成为判断浏览器类型屏幕分辨率自动调用不同CSS的代码。复制代码代码如下:解释:varIE1024="";varIE8
由于移动端设备拥有不同分辨率,PPI等引起的问题,常常需要针对不同屏幕分辨率来调整优化,如使用@2x图片,max-width限制等。采用css@font-fac
根据正在浏览网页的用户终端尺寸不同,调用相应的CSS文件。HTML代码基本完成后,在CSS中进行属性的设置。针对不同的分辨率进行布局,分为两个CSS文件,可在H
华为平板m6画质不支持手动调分辨率。为了提高续航体验,系统默认选择智能分辨率模式,可以在不同场景适配不同分辨率,有助于省电。 华为平板M6是华为旗下的一款平板