出于某种原因，在不同屏幕中查看HTML页面时，页面方向和布局是不同的。它在我的高清电视上看起来不错，但在我的笔记本电脑屏幕上却看起这是我的代码，是否有更好的方式来设置图像样式？我目前正在使用css。
谢谢！
HTML 忽略脚本部分。
<body bgcolor="000000">
<img id="manf" src="images/whitef.svg" alt="Body" />
<img id="man" src="images/bodyf.svg" alt="Body" />
<iframe id ="bre" src="images/icons/nresp.svg"frameborder="0"></iframe>
<iframe id ="temp" src="images/icons/ntemp.svg"frameborder="0"></iframe>
<iframe id ="stress" src="images/icons/nstress.svg"frameborder="0"></iframe>
<iframe id ="loud" src="images/icons/nloud.svg"frameborder="0"></iframe>
<iframe id ="g1" src="images/icons/ngas1.svg"frameborder="0"></iframe>
<iframe id ="g2" src="images/icons/ngas2.svg"frameborder="0"></iframe>
<iframe id ="alt" src="images/icons/nalt.svg"frameborder="0"></iframe>
<iframe id ="shoe" src="images/icons/nshoes.svg"frameborder="0"></iframe>
<iframe id ="cari" src="images/icons/ncari.svg"frameborder="0"></iframe>
<iframe id ="heart" src="images/heartn.svg" frameborder="0"></iframe>
<p id ="Heart"> 100</p>
<p id ="RespirationR">200</p>
<p id="Temperature">300</p>
<p id="GSR">400</p>
<p id="Sound">500</p>
<p id="Gas1">600</p>
<p id="Gas2">700</p>
<p id="Altitude">800</p>
<p id="Weight">900</p>
<p id="Caribiner">000</p>
CSS
#main{
position: absolute;
left:-;
top:0;
z-index: 0;
}
#wheel1{
position: absolute;
left:1407px;
top:428px;
z-index: 1;
-webkit-animation: rotate 30s infinite;
}
#wheel2{
position: absolute;
left:1590px;
top:427px;
z-index: 1;
-webkit-animation: rotate 20s infinite;
}
#wheel3{
position: absolute;
left:1770px;
top:427px;
z-index: 1;
-webkit-animation: rotate 15s infinite;
}
#person1{
position: absolute;
left:344px;
top:778px;
z-index: 1;
}
#person1T{
position: absolute;
left:344px;
top:778px;
z-index: 3;
}
@-webkit-keyframes rotate{
0% {-webkit-transform:rotate(0deg);}
10% {-webkit-transform:rotate(36deg);}
20% {-webkit-transform:rotate(72deg);}
30% {-webkit-transform:rotate(108deg);}
40% {-webkit-transform:rotate(144deg);}
50% {-webkit-transform:rotate(180deg);}
60% {-webkit-transform:rotate(216deg);}
70% {-webkit-transform:rotate(256deg);}
80% {-webkit-transform:rotate(288deg);}
90% {-webkit-transform:rotate(324deg);}
100% {-webkit-transform:rotate(360deg);}
}
JavaScript代码
var myVar = setInterval(function () {loadJSON()}, 500);
function loadJSON()
{
var data_file = "data/sensorData.json";
var http_request = new XMLHttpRequest();
try{
// Opera 8.0+, Firefox, Chrome, Safari
http_request = new XMLHttpRequest();
}catch (e){
// Internet Explorer Browsers
try{
http_request = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try{
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
http_request.onreadystatechange = function(){
if (http_request.readyState == 4 )
{
// Javascript function JSON.parse to parse JSON data
var jsonObj = JSON.parse(http_request.responseText);
// jsonObj variable now contains the data structure and can
// be accessed as jsonObj.name and jsonObj.country.
// document.getElementById("Distance").innerHTML = jsonObj.dist;
document.getElementById("Temperature").innerHTML = jsonObj.temp;
document.getElementById("Heart").innerHTML = jsonObj.heart;
document.getElementById("RespirationR").innerHTML = jsonObj.respr;
document.getElementById("Gas1").innerHTML = jsonObj.gas1;
document.getElementById("Gas2").innerHTML = jsonObj.gas2;
document.getElementById("Altitude").innerHTML = jsonObj.alti;
document.getElementById("Weight").innerHTML = jsonObj.shoes;
document.getElementById("GSR").innerHTML = jsonObj.gsr;
document.getElementById("Sound").innerHTML = jsonObj.loud;
document.getElementById("Caribiner").innerHTML = jsonObj.cari;
if (jsonObj.heart>180) {
var doc = document.getElementById("heart").contentDocument;
// modify the style element's style
doc.styleSheets[0].cssRules[0].style.fill = "#FF0000";
}else{
var doc = document.getElementById("heart").contentDocument;
doc.styleSheets[0].cssRules[0].style.fill = "#00FF00";
};
if(jsonObj.respr>=55){
var doc1=document.getElementById("bre").contentDocument;
doc1.styleSheets[0].cssRules[0].style.fill="#FF0000";
// doc1.getElementById("ell").setAttribute("fill","FF0000");
}
else if (jsonObj.respr<55 && jsonObj.respr>25){
var doc1=document.getElementById("bre").contentDocument;
doc1.styleSheets[0].cssRules[0].style.fill="#FFFF00";
}
else{
var doc1=document.getElementById("bre").contentDocument;
doc1.styleSheets[0].cssRules[0].style.fill = "#00FF00";
// doc1.getElementById("ell").setAttribute("fill","00FF00");
};
if(jsonObj.gas1>=20){
var doc2=document.getElementById("g1").contentDocument;
doc2.styleSheets[0].cssRules[0].style.fill="#FF0000";
// doc1.getElementById("ell").setAttribute("fill","FF0000");
}
else if (jsonObj.gas1<20 && jsonObj.gas1>10){
var doc2=document.getElementById("g1").contentDocument;
doc2.styleSheets[0].cssRules[0].style.fill="#FFFF00";
}
else{
var doc2=document.getElementById("g1").contentDocument;
doc2.styleSheets[0].cssRules[0].style.fill = "#00FF00";
// doc1.getElementById("ell").setAttribute("fill","00FF00");
};
if(jsonObj.gas2>=80){
var doc3=document.getElementById("g2").contentDocument;
doc3.styleSheets[0].cssRules[0].style.fill="#FF0000";
// doc1.getElementById("ell").setAttribute("fill","FF0000");
}
else if (jsonObj.gas2<80 && jsonObj.gas2>20){
var doc3=document.getElementById("g2").contentDocument;
doc3.styleSheets[0].cssRules[0].style.fill="#FFFF00";
}
else{
var doc3=document.getElementById("g2").contentDocument;
doc3.styleSheets[0].cssRules[0].style.fill = "#00FF00";
// doc1.getElementById("ell").setAttribute("fill","00FF00");
};
if (jsonObj.alti>3 && !jsonObj.cari) {
var doc4 = document.getElementById("cari").contentDocument;
// modify the style element's style
doc4.styleSheets[0].cssRules[0].style.fill = "#FFFF00";
}else{
var doc4 = document.getElementById("cari").contentDocument;
doc4.styleSheets[0].cssRules[0].style.fill = "#00FF00";
};
if (jsonObj.shoes) {
var doc5 = document.getElementById("shoe").contentDocument;
// modify the style element's style
doc5.styleSheets[0].cssRules[0].style.fill = "#00FF00";
}else{
var doc5 = document.getElementById("shoe").contentDocument;
doc5.styleSheets[0].cssRules[0].style.fill = "#FF0000";
};
}
}
http_request.open("GET", data_file, true);
http_request.send();
}