Question

我的网页使用多个部分。我将.header部分设置为1050px，非常适合桌面查看，但在移动设备上查看时，内部元素会溢出到下一部分。

如何无缝地更改移动查看的部分高度，以便元素不会被移动。溢出？

欢迎其他想法。

这是我的CSS部分：

.header-14-sub {
  color: #bdc3c7;
  background-color: #1c201d;
  position: relative;
  padding-top: 95px;
  padding-bottom: 95px;
  height: 1200px;
}

Answer 1

以下是您的一个选项：http://codepen.io/panchroma/pen/BulnL

我正在使用媒体查询来设置不同的CSS值作为窗口宽度更改的视口。 css易于遵循并且为了使其可靠地工作，您需要在文档的头部包含类似于以下的元标记。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

我使用min-height而不是heght来控制div大小，因为它更灵活，例如，如果用户有大字体设置，它可能会提供更好的结果。

我为媒体查询视口宽度选择的断点仅用于说明，自定义这些断点以适合您的设计细节。

祝你好运！

CSS

.header-14-sub {
  color: #bdc3c7;
  background-color: #1c201d;
  position: relative;
  padding-top: 95px;
  padding-bottom: 95px;
  min-height: 900px; /* set default height */
  transition: all 0.5s ease; /* optional css transition effect */
}

/* For media queries to work on smartphones, be sure to add a meta tag  similar to the following  
<meta name="viewport" content="width=device-width, initial-scale=1.0">
*/

@media (max-width: 480px) {
.header-14-sub {min-height: 300px;}
}

@media (min-width: 481px) and (max-width: 767px) {
.header-14-sub {min-height: 500px;}
}

@media (min-width: 768px) and (max-width: 979px) {
.header-14-sub { min-height: 700px;}
}

@media (min-width: 1200px) {
.header-14-sub {min-height: 1200px;}
}

改变截面高度响应设计

1 个答案: