Question

我在笔记本电脑上建了一个网站，这是我第一次上大学。

我真的很喜欢它，在短短3天内我获得了大量的HTML和CSS知识，并制作了一个导航栏，还有3个简单的盒子，里面有我们不得不做的图像/信息。

我没有意识到，分辨率不会拉伸或适应其他屏幕。我在我的电脑上打开它，显示器是1080p，所以我的右侧文本框在它和中间盒之间有很大的差距。我在顶部的横幅也是在我的笔记本电脑上看到的，但不是我的屏幕宽度。

#banner {
background: url("../images/background.jpg") no-repeat center;
background-size:100%;
width: 1920px;
height: 200px;
min-width:700px;
max-width: 1920px;

如果我像这样制作宽度和高度，它会适应屏幕吗？另外，如果我包含最小和最大，我需要宽度和身高 >？让这个横幅很合身的想法将是一个很好的答案，因为我将使用答案来编辑我的其他元素。

Answer 1

我建议使用高度和宽度（宽度：100％）而不是静态尺寸的百分比。它将有助于不同的屏幕尺寸以及更改浏览器的大小。

修改：simple demo here

HTML：

<div id="test">
  <p id="par">
    Hello world!
  </p>
</div>

CSS：

#test{
  width: 50%;
}

#par{
  width: 100%;
  background-color: pink;
}

Answer 2

如果我像这样制作宽度和高度，它会适应屏幕吗？

不，px单位代表固定宽度。您可以使用百分比单位让元素具有x％的容器宽度或高度。另一种不太常见的选择是使用vw和vh，它们分别代表视口宽度和高度的百分比。

对于您的用例width: 100%; height: auto即可。图像将展开以填充其容器，高度将动态变化，以使图像保持其纵横比。

但是，宽高比为16：9或16:10的常规桌面横幅在移动设备上看起来不会很好。您可能需要使用媒体查询根据视口宽度显示不同的图像。

以此为例：

＆＃13;

.banner {
  width: 100%;
}

@media (min-width: 600px) {
  .banner-mobile { display: none; }
}

@media (max-width: 599px) {
  .banner-desktop { display: none; }
}

＆＃13;

<img class='banner banner-desktop' src="https://placehold.it/600x200?text=imma_desktop_banner"/>
<img class='banner banner-mobile' src="https://placehold.it/200x200?text=imma_mobile_banner"/>

＆＃13;

演示

https://codepen.io/nicooga/full/pPWyJx/ 请注意，调整窗口大小会更改显示的横幅。

读取

https://www.w3schools.com/cssref/css_units.asp https://developer.mozilla.org/es/docs/CSS/Media_queries

Answer 3

我会将横幅宽度设置为100％，背景尺寸设置为＆＃39;覆盖＆＃39;使图像以位置为中心填充横幅区域：

#banner {
    background-image: url(http://placehold.it/1200x800);
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center center;
}

你可以玩小提琴：https://jsfiddle.net/piotku/u4zdLkyw/1/

使元素适合屏幕分辨率（CSS / HTML）

3 个答案:

演示

读取