html - “How to fix ‘SKIN’ 适合所有尺寸的屏幕”

Question

我用这段代码来为我的整个网站设计皮肤。

.mainpage {
  width:85%;
  height: 100vh;
  margin:auto;
  position: relative;
  text-align: center;
  border:1px solid grey;
  z-index:99999999;
}
.skin {
  position: fixed;
  z-index: 0;
  top: 0px;
  left: 50%; 
}
.skin > div {
  position: relative;
  left: -50%;
  height: 1024px;
  width: 1600px;	
}
.image-skin {
  background:url(https://hypercube.gr/skin-specs.jpg);
  position: fixed;
  width: 1600px;
  height: 1024px;
  top:-190px;
}

<div class="mainpage"><h1>main page</h1></div>

<div class="skin">
  <div>
	  <a href="#">
		  <div class="image-skin"> 
		  </div>
	  </a>
  </div>
</div>
  

  

当屏幕宽度为 1280px 时效果很好，但其他任何屏幕宽度都坏了，我如何才能像 1280px 一样适合所有屏幕？提前致谢这是 code 的链接

Answer 1

你不应该将 width 设置为 1600px，你应该使用百分比值，对你用作背景的图像做一点修改ss代码可以帮你实现你想要的

   .mainpage {
      width:85%;
      height: 100vh;
      margin:auto;
      position: relative;
      text-align: center;
      border:1px solid grey;
      z-index: 1;
    }
    .skin {
      position: fixed;
      top: 0px;
      left: 50%; 
    }
    .skin > div {
      position: relative;
      left: -50%;
      height: 1024px;
      width: 1600px;	
    }
    .image-skin {
      background:url(https://hypercube.gr/skin-specs.jpg);
      position: fixed;
      /*width: 1600px;*/
      
      height: 1024px;
      /*top:-190px;*/
      width: 100%;
      left: 0;
      text-align: center;
      background-position-y: 0px;
      background-repeat: no-repeat;
      background-size: contain;
    }

    <div class="mainpage"><h1>main page</h1></div>

    <div class="skin">
      <div>
	      <a href="#">
		      <div class="image-skin"> 
		      </div>
	      </a>  	      
      </div>
    </div>