移动设备的媒体查询更改桌面视图答案

【问题标题】：Media Query for Mobile Changes Desktop View移动设备的媒体查询更改桌面视图
【发布时间】：2022-10-22 21:48:59
【问题描述】：

我的编码经验为零，并且一直在使用货物处理我的投资组合。我目前正在尝试使用媒体查询在我的主页上调整我的一篇文章的移动视图，但代码似乎也改变了桌面上的布局。我将在下面放置所需的移动和桌面视图的参考图片，以及我正在使用的当前代码。任何帮助表示赞赏，谢谢！

**（忽略代码中的边界，这主要是为了在进行更改时可见）

这是我的代码：

<style>
    .tiffany {
    /*border: solid green 3px;*/
    width: 100%;
    height: 100%;
  }
  
  .tiffany img {
    width: 100%;
    height: 100%;
    position: relative;
  }
  
  .tiffany .textbox {
    /*border: solid red 3px;*/
    position: absolute;
    margin: 32px;
    font-weight: bold;
    text-align: left;
  }
  
  .resize_tiffany {
    font-size: 5vw;
  }
  
  .tiffany .gradient {
    /*border: solid red 3px;*/
    left: 0px;
    top: 0px;
    z-index: 1000;
    position: absolute;
    width: 100%;
    height: 100%;
    /* other styles (left, top, right, and padding) */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), transparent);
  }
  /* read-here */
  
  .read-here {
    position: absolute;
    bottom: 4vw;
    left: 50px;
    background-color: rgb(0, 68, 11);
    color: rgb(0, 68, 11);
    padding: 16px;
    font-size: 16px;
    border: none;
    font color: rgb(255, 255, 255)
  }
  
  @media only screen and (max-width: 480) {
    .tiffany .textbox {
      border: solid blue 3px;
      position: absolute;
      margin: 15px;
      font-weight: bold;
      text-align: left;
    }
    @media only screen and (max-width: 480) {
      /* read-here */
      .read-here {
        position: absolute;
        bottom: 4vw;
        left: 10px;
        background-color: rgb(0, 68, 11);
        color: rgb(0, 68, 11);
        padding: 8px;
        font-size: 16px;
        border: none;
        font color: rgb(255, 255, 255)
      }
    }
</style>

<div class="tiffany">
  <img class="background-image" src="https://freight.cargo.site/t/original/i/49f84023695066f70817f10d5164bfc85e438f33abd59b9c50a439f6a22f0454/Featured-Page_Tiffany_Alfonseca_Latina_Edit.jpeg">
  <div class="gradient">
    <div class="textbox full-pointer-events-none">
      <h1> <span class="resize_tiffany">Tiffany Alfonseca Pays Homage in Painting</span></h1>
      <br>
    </div>
    <div class="read-here">
      <bodycopy> <b><a href="https://latina.com/tiffany-alfonseca-pays-homage-in-painting/" target="_blank">Read here</a></b> </bodycopy>
    </div>
  </div>
  <br></div>

【问题讨论】：

我也很乐意添加我的作品集以供查看！
您可能需要在宽度末尾添加单位：max-width(480px)
检查媒体查询周围的括号，我认为您缺少一些右括号。如前所述，还有 480 的单位
谢谢！那行得通:)我现在也遇到了更改字体大小的问题 .tiffany .textbox { /*border: solid red 3px;*/ position: absolute;边距：32px；字体粗细：粗体；文本对齐：左；字体大小：5vw； } @media only screen and (max-width: 480px) { .tiffany .textbox { font-size: 2vw;位置：绝对；边距：0px；填充：0px；左：10px；字体粗细：粗体；文本对齐：左； } }
没有<bodycopy> 这样的东西你从哪里得到的？

标签： css responsive-design media-queries

【解决方案1】：

您还没有像这样在 px 中添加：

@media only screen and (max-width: 480px)
{
}

此外，我强烈建议使用 rem 而不是 vw 作为字体大小。您可以在以下位置阅读更多相关信息：https://www.freecodecamp.org/news/what-is-rem-in-css/

本质上，如果您不指定字体大小，则默认值为 16px，因此 1rem 将等于 16px，2rem = 32px 等等。

【讨论】：