使用媒体查询按屏幕大小调整文本大小答案

【问题标题】：Using Media Queries to resize text by screen size使用媒体查询按屏幕大小调整文本大小
【发布时间】：2021-10-23 01:38:37
【问题描述】：

我正在尝试使用媒体查询根据屏幕大小调整导航文本的大小。尺寸显示为 30px，较小的屏幕尺寸，但当屏幕很大时，它仍然是 30px。以下是我的代码：

HTML：

<div class="nav">
 <a class="logo" style="cursor: pointer">LIT</a>
 <div class="sidebar" id="active">
 <a style="cursor: pointer;" id="projectLink">samples &nbsp;</a>
 <a style="cursor: pointer;" id="aboutLink">services &nbsp;</a>
 <a style="cursor: pointer;" id="blogLink">tweets &nbsp;</a>
 <a style="cursor: pointer;" id="contactLink" class="mail" onclick="openForm()">contact</a>
 </div>

SCSS：

   .sidebar{
    z-index: 1;
    font-weight: bolder;
    margin-left: auto;
    margin-right: 0px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    font-family: 'Raleway', sans-serif;
    color: black;

    /* If the screen size is 601px wide or more, set the font-size of <div> to 80px */
    @media screen and (min-width: 601px) {
      .sidebar {
        font-size: 80px;
      }
    }

    /* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
    @media screen and (max-width: 600px) {
      .sidebar {
        font-size: 30px;
      }
    }

【问题讨论】：

标签： html css media-queries

【解决方案1】：

您将.sidebar 包裹在另一个.sidebar 中

把它们拿出来会有帮助：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .sidebar{
        z-index: 1;
        font-weight: bolder;
        margin-left: auto;
        margin-right: 0px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        font-family: 'Raleway', sans-serif;
        color: black;
      }
      /* If the screen size is 601px wide or more, set the font-size of <div> to 80px */
      @media screen and (min-width: 601px) {
        .sidebar {
          font-size: 80px;
        }
      }
      /* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
      @media screen and (max-width: 600px) {
        .sidebar {
          font-size: 30px;
      }
    </style>
  </head>
  <body>
    <p class="sidebar">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
    </p>
  </body>
</html>

【讨论】：