Question

我正在以1920 * 1080的分辨率在PC上写我的网站，当我打开html文件时，我将所有内容调整为看起来不错。当我从另一台具有720p分辨率的计算机（例如：我的笔记本电脑）打开html时，该站点看起来很糟糕，并且所有照片，文本，链接..etch几乎都在另一个内部。这就像html仅以1080p分辨率工作，并且如果有人使用更大或更小的html，则该网站无法适应您的分辨率。您能告诉我什么缺失的代码可以帮助网站以任何分辨率自行调整，我应该在哪里添加这部分代码？我的“样式”代码是

<head>
<meta charset="UTF-8">
<title>test</title>
<style>
 html
 {
    scroll-behavior: smooth;
 }

 welcome
  {
    position: relative;
    text-align: center;

  } 
.header img 
    {
      position: sticky;
      left: 540px;
      width: 800px;
      height: 200px;
      align-content: center;
    }
ul
    {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
    }

li 
{
  float: left;
}

li a
    {
      display: block;
      color: white;
      text-align: center;
      padding: 25px 35px;
      text-decoration: none;
    }

li a:hover:not(.active) 
    {
      background-color: #111;
    }

.active 
      {
        background-color: #4CAF50;
      }
.rightbar
      {
        float:right;
      }
.cake
      {
        position: relative;
        left: 4%;
        width: 320px;
        height: 380px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.25);
      }
.cake1
      {
        position: relative;
        left: 25%;
        width: 320px;
        height: 380px;
        bottom:38%;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.25);
      }
.cake2
      {
        position: relative;
        left: 60%;
        width: 320px;
        height: 380px;
        bottom:76%;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.25);
      }
.cake3
      {
        position: relative;
        left: 80%;
        width: 320px;
        height: 380px;
        bottom:114%;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.25);
      }
.product_a
      {
        position: absolute;
        background-color: #f4511e;
        border: none;
        color: white;
        padding: 16px 32px;
        text-align: center;
        font-size: 20px;
        margin: 20px;
        opacity: 1;
        transition: 0.3s;
        left:25px;

      }
.product_a:hover
    {
    opacity: 0.6;
    }
#section1
    {
      height:1000px;
    }
#section2
    {
      height: 1000px;


    }

Answer 1

您要寻找的是media queries。

通过媒体查询，您可以控制页面样式以适应不同的分辨率。

例如：

/* If the browser window is 720px or smaller, the background color will be lightblue */
@media only screen and (max-width: 720px) {
  body {
    background-color: lightblue;
  }
}

如何使我的网站内容适合全屏显示或不全屏显示

1 个答案: