让我的网络应用程序调整为不同的屏幕尺寸 -

Posted 2023-02-22

【中文标题】让我的网络应用程序调整为不同的屏幕尺寸 -

【英文标题】：Having my web app adjusted to different screen sizes -

【发布时间】：2021-09-16 10:55:40

【问题描述】：

我在 React 中有我的 webapp。

我使用 CSS @media 查询将网站大小/分辨率调整为不同的分辨率。

我已针对以下分辨率断点调整 Web 应用程序：1204、1200、1024、768、480。

对于分辨率高于 1204 的屏幕，网站开始变得未调整。

我几乎所有的测量都使用 rem。

这是我的标头代码示例：

React 的 html：

<header className="header__section" id="header-section-hero">

            <div className="header__intro"><h1 className="header__hero">ABC</h1></div>
            <a href="#"><div className="github-icon"><FaGithub className="github-text"/></div></a>
            <a href="#"><div className="linkedin-icon"><FaLinkedin className="linkedin-text" /></div></a>

            /** <div className="ball" /> */
</header>
        

SASS/CSS：

@media only screen and (max-width: 1204px)
    .header__section 
      width: 81rem;
      height: 42rem;
      background-image: url("../Assets/bg-hero.jpg");
      background-size: cover;
      background-repeat: no-repeat;


    

    .header__intro

      h1
        color: white;
        font-family: "Arial", sans-Serif;
        font-size: 2rem;
        text-align: center;
        float: left;
      

    



    .github-icon
      background-color: lightgray;
      border-radius: 50%;
      width: 5.5rem;
      height: 5.5rem;
      position: absolute;
      top: 39rem;
      left: 25rem;
      z-index: 10;
      opacity: 0.8;



      .github-text
        font-size: 40px;
        position: relative;
        top: 1.5rem;
        left: 1.5rem;
      

    

    .github-text:hover
      transform: rotate(-30deg);
      cursor: pointer;
    

    .linkedin-icon
      background-color: lightgray;
      border-radius: 50%;
      width: 5.5rem;
      height: 5.5rem;
      position: absolute;
      top: 39rem;
      left: 56rem;
      z-index: 10;
      opacity: 0.8;

      .linkedin-text
        font-size: 35px;
        position: relative;
        left: 1.5rem;
        top: 1.5rem;
      


    



        
        
        

我的问题：

网络应用程序的大小无法调整到大于 1204 像素的大小的原因是什么， 将页面调整为不同屏幕尺寸的最佳方法是什么？

【问题讨论】：

如果这是您的 CSS 文件中唯一的文本，那么该样式将仅适用于宽度：1204。视口宽度超过 1024 像素的自定义样式绝对为零。它们将具有默认样式。

你将没有任何样式。也许您可以尝试执行这里所说的w3schools.com/css/css_rwd_mediaqueries.aspIDK 最佳实践，似乎我与之合作的每家公司都有自己的规则。

【参考方案1】：

    Here, you are using (max-width: 1204px)

max-width 代表显示分辨率的最大值。所以无论你写什么样式表都只能在 1204px 宽度内工作。 你可以在上面使用 min-width ..我希望它会起作用 将您的代码更改为

(max-width: 1204px)

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。