Question

我试图构建一个响应速度一半的网站意味着header+2徽标不会随着窗口大小的变化而变化，但是大小合适。

只要height+width，这6张图片就会更改window.resize以适应新的窗口大小。

我尝试过这段代码，但是：

标题+ 2个徽标也是响应式的，我希望它们始终具有完全大小（最大浏览器宽度）。
高度和宽度与屏幕不兼容，而且太大。感谢您的建议如何解决。

CODE

<!DOCTYPE html>
<html>
<head>
</head>
<body onload="first()">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(window).resize(changeImagesSize);
function first()
{
  calc();
changeImagesSize()
}
function calc()
{
window.img11 = new Image();
window.img12 = new Image();
window.img13 = new Image();
window.img14 = new Image();
window.img15 = new Image();
window.img16 = new Image();
img11.src="1.jpg";
img12.src="2.jpg";
img13.src="3.jpg";
img14.src="4.jpg";
img15.src="5.jpg";
img16.src="6.jpg";
}
function changeImagesSize()
{
     var img = document.getElementById('header1'); 
   var heightheader = img.clientHeight;
   var heightavailable=$('body').innerHeight()-heightheader;
   var widthavailable=$('body').innerWidth();
var x=($(window).width()/screen.width);
   var img1width=widthavailable*(img11.width/(img11.width+img12.width+img13.width+20));
   var img2width=widthavailable*(img12.width/(img11.width+img12.width+img13.width+20));
   var img3width=widthavailable-img2width-img1width-20;


   var img1h=heightavailable*(img11.height/(img11.height+img14.height+heightheader+20));
   var img2h=heightavailable*(img12.height/(img12.height+img15.height+heightheader+20));
   var img3h=heightavailable*(img13.height/(img13.height+img16.height+heightheader+20));
     $('#img1').width(img1width); 
     $('#img2').width(img2width); 
     $('#img3').width(img3width);

     $('#img1').height(img1h); 
     $('#img2').height(img2h); 
     $('#img3').height(img3h); 

   var img4width=widthavailable*(img14.width/(img14.width+img15.width+img16.width+20));
   var img5width=widthavailable*(img15.width/(img14.width+img15.width+img16.width+20));
   var img6width=widthavailable-img5width-img4width-20;


   var img4h=heightavailable*(img14.height/(img14.height+img11.height+heightheader+20));
   var img5h=heightavailable*(img15.height/(img15.height+img12.height+heightheader+20));
   var img6h=heightavailable*(img16.height/(img16.height+img13.height+heightheader+20));
     $('#img4').width(img4width); 
     $('#img5').width(img5width); 
     $('#img6').width(img6width); 


     $('#img4').height(img4h); 
     $('#img5').height(img5h); 
     $('#img6').height(img6h); 

}

</script>
<div id="header" style="position:relative;" >
    <img id='header1' src="header.png" style="position:absolute; width:100%;"/>
    <img id="logo1" src="logo1.png" style="position:absolute;left:30px;"/>
    <img id="logo2" src="logo2.png" style="position:absolute;  right:30px;"/>
</div>

    <img id='img1' src="1.jpg"/>
    <img id='img2' src="2.jpg"/>
    <img id='img3' src="3.jpg"/>
    <img id='img4' src="4.jpg"/>
    <img id='img5' src="5.jpg"/>
    <img id='img6' src="6.jpg"/>
<style>
body{overflow:hidden;}
img{height:auto;}
</style>
</body>
</html>

安排应该是带有2个徽标图片的标题（不移动）完全是所有时间 1 2 3（一行） 4 5 6（第二行）（图片）应移动并适合窗户。

非常感谢你的帮助

Answer 1

您正在尝试以完全错误的方向构建响应式网站。您应该使用媒体查询并以百分比定义所需宽度的宽度。在css中，您可以按百分比定义徽标的大小，该百分比将根据屏幕而变化。如果你想学习如何建立一个好的响应网站，请在你有更多问题时发表评论。

半响应网站不起作用

1 个答案: