Question

我的目标是在所有平台（移动/台式机）屏幕上的视口中放入页面的所有内容。

内容包括.main-carousel，它是图像滑块。 .overlay是页面上的主要叠加层

这是页面外观的图形。 pagelayout

当前，出现滚动条，并且页面上的“购买”按钮显示在视口下方。我在这里使用的是13英寸笔记本电脑。如何使它在所有浏览器中都具有响应能力？这是一个代码段供您参考。

function openNav() {
  document.getElementById("myNav").style.left = "50%";
}

function closeNav() {
  document.getElementById("myNav").style.left = "100%";
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.flickity-page-dots {
  display: none;
}

.main-carousel {
  margin-top: 20px;
}

.carousel-cell img {
  max-width: 35%;
  /* full width */
  height: auto;
}

.carousel-cell {
  width: 100%;
  /* full width */
  background: #FFFFFF;
  /* center images in cells with flexbox */
  display: flex;
  align-items: center;
  justify-content: center;
}

.flickity-enabled:focus .flickity-viewport {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

.flickity-button {
  background: transparent;
}

.overlay {
  height: 100%;
  width: 50%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 100%;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.5);
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay-content {
  float: right;
  position: relative;
  top: 15%;
  width: 50%;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #f1f1f1;
  display: block;
  transition: 0.3s;
}

.overlay a:hover,
.overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

@media screen and (max-height: 450px) {
  .overlay a {
    font-size: 20px
  }
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}


/*#text{
	position: absolute;
    top: 50%;
    left: 50%;
    font-size: 20px;
    color: white;
    transform: translate(-50%,-50%);
    ms-transform: translate(-50%,-50%);
}*/

.text-block {}

.text-block p {
  color: white;
}

h1 {
  color: white;
}

.button {
  background-color: #ddd;
  border: none;
  color: black;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 16px;
}

#button {
  text-align: center;
  margin-top: 30px;
}

#button a {
  background: #999;
  padding: 1em 2.4em;
  font-size: .9em;
  margin: 1em;
  color: white;
  text-decoration: none;
  text-align: center;
}

#logo .logo-image img {
  max-width: 100%;
  max-height: 30px;
}

<link href="https://unpkg.com/flickity@2/dist/flickity.min.css" rel="stylesheet" />
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

<htmL>

<head>

  <div id="logo">
    <div class="logo logo-image">
      <img src="https://static1.squarespace.com/static/5b87a2662714e5f90127b5d6/t/5c01ecc388251b9d3ce78f00/1543630386191/?format=1500w" alt="Studio Otto Berlin">
    </div>
  </div>
</head>

<body>

  <span style="float:right;" onclick="openNav()">&#8641;open</span>
  <div id="myNav" class="overlay">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <div class="overlay-content">
      <div class="text-block">
        <h1>"Fever" T-shirt</h1>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
          desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      </div>
      <button class="button">Purchase</button>
    </div>
  </div>
  <div class="main-carousel" data-flickity='{ "cellAlign": "left","contain": true,"wrapAround":true }'>
    <div class="carousel-cell"><img src="https://static1.squarespace.com/static/5b87a2662714e5f90127b5d6/5beb5695032be4bf05089f8c/5beb8113cd83669970bfab29/1542161236370/studio-otto-rave-skateboards-editorial-003-compressor.jpg"></div>
    <div class="carousel-cell"><img src="https://static1.squarespace.com/static/5b87a2662714e5f90127b5d6/5beb5695032be4bf05089f8c/5beb8113cd83669970bfab29/1542161236370/studio-otto-rave-skateboards-editorial-003-compressor.jpg"></div>
    <div class="carousel-cell"><img src="https://static1.squarespace.com/static/5b87a2662714e5f90127b5d6/5beb5695032be4bf05089f8c/5beb8113cd83669970bfab29/1542161236370/studio-otto-rave-skateboards-editorial-003-compressor.jpg"></div>
    <div class="carousel-cell"><img src="https://static1.squarespace.com/static/5b87a2662714e5f90127b5d6/5beb5695032be4bf05089f8c/5beb8113cd83669970bfab29/1542161236370/studio-otto-rave-skateboards-editorial-003-compressor.jpg"></div>

  </div>
  <div id="button"><a href="#">Button 1</a></div>

</body>

</htmL>

当我使用Google开发人员工具调整页面大小时，按钮下方有很多空白。 White_space

如何使页面具有响应性，以使所有内容适合视口？非常感谢您的帮助。

Answer 1

查找CSS文档以获取网格布局。您可以使用它定义应用程序主布局。然后，您可以使用 flex 元素（显示：flex）来定义各个小部件区域。 媒体查询是您要熟悉的另一件事，您可以专门告诉元素在不同分辨率下的行为。哦，还要检查单位类型 vh和vw ，而不要使用像素。我希望这些会为您带来更多学习的思路。

使所有元素都适合所有平台上的视口，而无需滚动

1 个答案: