如何使标题徽标响应更大的屏幕宽度？答案

【问题标题】：How to make Header Logo Responsive For Larger Screen width?如何使标题徽标响应更大的屏幕宽度？
【发布时间】：2021-09-15 09:53:33
【问题描述】：

我已经为一个网站创建了标题，其中徽标对于 2000 的设备宽度可以正常工作，但对于 3000 或 4000px 的宽度，它会向中心移动，我不希望它位于标题的固定位置。我添加了必需的 HTML 和 CSS 。对于最大宽度为 1400 的移动选项卡和桌面，它工作正常，但之后如果我继续增加宽度，徽标开始向中心移动。我不知道如何修复它，如果我提高屏幕分辨率，它不应该向中心移动

对于屏幕尺寸 - 1400 像素

对于屏幕尺寸 - 5000 像素

所以你可以看到更大的屏幕它已经移到了中心

<header>
    <div class="gtlLogo-wrapper brandedHeader lesssWidth" id="logo">
     <a href="service.html" class="alogoCo alogoLogo remove_left"title="alogo .com"></a> 
     <span class="branded-VerticalLine co-verticalllin" id="branded-VerticalLine"></span>
    <div class="brandedPubLogoPenny" id="brandedPubLogoPenny" style="background-image: 
     url(&quot;/imageserver/branded/publisher/113048944_Logo.svg&quot;);"></div>
</header>

CSS

    header {
        background-color: #fff;
    }
    
    element.style {
    }
        @media only screen and (min-width: 750px) and (orientation: portrait), only screen and (min-width: 1024px) and (orientation: landscape)
    #main_header .lesssWidth {
        display: flex;
        margin: auto;
        width: 100%!important;
        max-width: 635px!important;
        padding: 17px 20px!important;
    }
#main_header #logo {
        max-width: unset;
        width: 30%;
    }
    #main_header #logo {
        width: 100%;
        max-width: 130px;
    }
    }
    @media only screen and (min-width: 1025px)
    header {
        width: 100%;
    }
#main_header #logo {
        max-width: unset;
        width: 27%;
    }
    }
    
    @media only screen and (min-width: 1400px)
    #main_header .lesssWidth {
        max-width: 1012px!important;
    }
    }
    
    @media only screen and (min-width: 1800px)
    #main_header .lesssWidth {
        max-width: 151px!important;
    }
    @media only screen and (min-width: 2000px)
    #main_header .lesssWidth {
        max-width: 1211px!important;
    }
    }

【问题讨论】：

标签： html css flexbox responsive-design responsive

【解决方案1】：

尝试在 #main_header .lesssWidth 上使用 CSS 属性 justify-content

【讨论】：

它会移动一点，但实际上并不完全是 max-width 的问题，比如 max-width ： 1012px!important 是针对 1400px 的，但是随着屏幕尺寸的增加，这个 1012px 会有所不同。我的意思是差异设备所需的最大宽度差异