Question

我有一个网站，其中一个水平部分分为两个。左侧是文本和垂直堆叠的按钮。右侧是图像。在屏幕的右侧，当屏幕缩小时，我试图使图像保持固定的像素量，在特定的断点处减小其尺寸。在屏幕的左侧，我希望文本占据接近屏幕的一半但不总是精确到50％（这取决于固定的图像大小）。但是，当我尝试这样做时，我一直遇到屏幕右侧图像变得太大或太小或出现滚动条的困难。

我理解这需要媒体查询，但是根据px，vw等实现这些可变宽度和大小要求的最有效方法是什么？

类似的例子是本网站上的智能路线规划和车队管理部分：https://workwave.com/，右侧有地图。

  @media screen and (max-width: 2000px) {
    .container {
        display: flex;
        flex-direction: row;
    }
  }

  @media screen and (max-width: 975px) {
    .logo-img {
        width: 50vw;
    }
  }

  .logo-img {
    width: 50vw;
  }

  /* @media screen and (max-width: 900px) {
    .logo-img {
        width: 700px;
    }
  } */

  .items {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      background-color: #0f2c4d;
  }


<body>
    <div class="container">
        <div class="items">  
            <h1>KJnjjkasdsad & asdfasdfasd dsfadfsada</h1>
            <p>Jnjasd dasklfsda dsfasd dsfklads fasd fasd asf asdlasd asdfasf asdfas asdlkmadsklmfasd fdaslmk fasd klmfasd asdklm fasdf.</p>
            <button type="button" class="btn btn-primary">Button</button>
        </div>
            <img class="logo-img" src="./images/fleet-sm.png" alt="Mountain View">
        <div></div>
        <div></div> 
    </div>
</body>

Answer 1

您还可以为不同的媒体设置不同的样式表，例如：

<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">

根据屏幕大小使用你想要的任何css文件，这样你就可以创建不同的css并将它们用于特定的宽度范围，并且在断点时它会改变它的css，因为你指定了不同宽度的下一个css文件。

此外，您可以使用媒体查询根据屏幕宽度更改您的CSS。

//699px taken as demo
//for screen smaller than 699px 
@media screen and (max-width: 699px){
.whatever
{
//css
}
}

//for screen bigger than 699px
@media screen and (min-width: 699px){
.whatever
{
//css
}
}

Answer 2

根据你的要求，展示如何使用w3.css，使用这个css它的类已经预先编写了针对不同类的不同大小的媒体规则

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<style>
.sc
{
width:100%;height:auto;
}
</style>
    <div class="w3-container">
        <div class="w3-half">  
            <h1>KJnjjkasdsad & asdfasdfasd dsfadfsada</h1>
            <p>Jnjasd dasklfsda dsfasd dsfklads fasd fasd asf asdlasd asdfasf asdfas asdlkmadsklmfasd fdaslmk fasd klmfasd asdklm fasdf.</p>
            <button type="button" class="btn btn-primary">Button</button>
        </div>
        <div class="w3-half">
            <img class="sc" src="http://www.neutelings-riedijk.com/content/images/6f711d8f7fec1c9f85dfcb5045d4f30b.jpg" alt="Mountain View">

    </div>

    </div>

如何根据固定宽度响应图像大小

2 个答案: