时间戳

首页 > 解决方案 > 如何配置我当前的 css 样式以调整到某个位置到小于 760px 的屏幕

javascript - 如何配置我当前的 css 样式以调整到某个位置到小于 760px 的屏幕

问题描述

我有一个布局分配，它需要看起来像这样： 布局分配

我试过这样做，到目前为止它看起来像这样： 我的页面第 1 部分
我的页面第 2 部分

我在调整徽标时遇到了麻烦，就像在作业中询问的那样，当您从右侧数数时，第四个 div 没有拉伸 2 个 div。

作业的第二部分看起来需要如下所示：

布局分配第 2 部分

我不知道该怎么做以及如何将其调整为作业要求的具体调整。

这是我的html和css：

.header {
  display: grid;
  border: crimson 3px solid;
  grid-row-gap: 1em;
  height: auto;
}

.fantasy {
  margin-left: 400px;
}

.content {
  display: grid;
  grid-template-columns: 70% 30%;
  /*
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  */
  grid-gap: 1em;
}

.content>div {
  background: #eee;
}

.content>div:nth-child(odd) {
  background: #ddd;
}

.footer {
  background-color: cadetblue;
  width: 100%;
}

.fotografi {
  width: 100%;
  height: auto;
}

.logo {
  width: 10%;
  height: auto;
}
<!DOCTYPE html>

<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>

  <div class="header">
    <img class="logo" src="foto/logo.jpeg">
    <h2 class="fantasy">Fantasy Wallpapers</h2>
  </div>

  <br/>

  <div class="content">
    <div>
      <img class="fotografi" src="foto/mountaingate.jpg">
    </div>
    <div>
      World War II or the Second World War, often abbreviated as WWII or WW2, was a global war that lasted from 1939 to 1945. It involved the vast majority of the world's countries—including all of the great powers—forming two opposing military alliances: the
      Allies and the Axis powers. In a total war directly involving more than 100 million personnel from more than 30 countries, the major participants threw their entire economic, industrial, and scientific capabilities behind the war effort, blurring
      the distinction between civilian and military resources.
    </div>
    <div>
      World War II or the Second World War, often abbreviated as WWII or WW2, was a global war that lasted from 1939 to 1945. It involved the vast majority of the world's countries—including all of the great powers—forming two opposing military alliances: the
      Allies and the Axis powers. In a total war directly involving more than 100 million personnel from more than 30 countries, the major participants threw their entire economic, industrial, and scientific capabilities behind the war effort, blurring
      the distinction between civilian and military resources.
    </div>
    <div>
      World War II or the Second World War, often abbreviated as WWII or WW2, was a global war that lasted from 1939 to 1945. It involved the vast majority of the world's countries—including all of the great powers—forming two opposing military alliances: the
      Allies and the Axis powers. In a total war directly involving more than 100 million personnel from more than 30 countries, the major participants threw their entire economic, industrial, and scientific capabilities behind the war effort, blurring
      the distinction between civilian and military resources.
    </div>
    <div class="divcolumn">
      World War II or the Second World War, often abbreviated as WWII or WW2, was a global war that lasted from 1939 to 1945. It involved the vast majority of the world's countries—including all of the great powers—forming two opposing military alliances: the
      Allies and the Axis powers. In a total war directly involving more than 100 million personnel from more than 30 countries, the major participants threw their entire economic, industrial, and scientific capabilities behind the war effort, blurring
      the distinction between civilian and military resources.
    </div>
  </div>

  <div class="footer">
    <h3>Fantasy Wallpaper</h3>
  </div>
</body>

</html>

我从这项任务中学到了很多东西，我希望如果有人能给我解决方案，它会给我足够的知识来进一步发展。

标签： javascripthtmlcss

解决方案

为了调整较小屏幕的大小，我建议使用媒体查询，它看起来像这样：

@media only screen and (max-width: 760px) {
  h1 {
    ...
  }
  p {
    ..
  }
}

此外，您可以使用相对尺寸：

  • em 相对于元素的 font-size （2em 表示当前字体大小的 2 倍）
  • ex 相对于当前字体的 x 高度（很少使用）
  • ch 相对于“0”的宽度（零）
  • rem 相对于根元素的字体大小
  • vw 相对于视口宽度的 1%*
  • vh 相对于视口高度的 1%*
  • vmin 相对于视口*小尺寸的 1%
  • vmax 相对于视口*大尺寸的 1%
  • % 相对于父元素

对于我会使用的一个项目的特定定位，例如这样：

{
position:absolute; 
bottom:0; 
left:0;
}

https://developer.mozilla.org/de/docs/Web/CSS/position

你还可以玩：

padding margin左 右 上 下

推荐阅读