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

Posted

技术标签:

【中文标题】让我的网络应用程序调整为不同的屏幕尺寸 -【英文标题】: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。

以上是关于让我的网络应用程序调整为不同的屏幕尺寸 -的主要内容,如果未能解决你的问题,请参考以下文章

在 Spring Boot MVC 中添加 ShallowEtagHeaderFilter

使用 AutoLayout 和 iOS 8 为不同设备调整 UICollectionViewCell 的大小

如何让JLabel在JFrame中动态调整大小?

Mac 窗口不会让我调整到更小,可能是限制?

在 Caffe 中为神经网络组织数据

如何让我的 Rails 应用程序的每个独角兽工作者登录到不同的文件?