Javascript 为什么CSS不能在不同的页面大小上正常工作

我有我的工具栏：

    <header className='toolbar'>
        <nav className='toolbar_navigation'>
            ///hamburger:
            <SideDrawer drawerClicked = {props.drawerClicked} />
            ///LOGO
            <div className='toolbar_logo'>MYCOOKIES</div>
        </nav>
    </header>

所以，一切似乎都很好（我希望如此），但当我在手机上打开它时，它会显示不同的东西。 iphone 6上的示例： iphone 5上的示例：

---

为什么会这样？有人能帮我吗？）我真的很感激

您必须考虑纵横比。 iPhone5的宽度至少比iPhone6小45像素。这意味着您必须使用类似于

vw

而不是

px

的方法来获得这些边距，以确保它们在不同的手机上看起来相似。

---

阅读css单元和媒体查询以获得更多帮助。

您必须考虑纵横比。 iPhone5的宽度至少比iPhone6小45像素。这意味着您必须使用类似于

vw

而不是

px

的方法来获得这些边距，以确保它们在不同的手机上看起来相似。

---

阅读css单元和媒体查询以获得更多帮助。

谢谢，但是使用

vw

或

%

有什么更好的方法呢，将

115px

更改为

20vw

，您应该明白我的意思。%s使用父元素的宽度，而vw使用屏幕的宽度。这意味着如果父元素的宽度小于屏幕的总宽度，

80%

将是父屏幕宽度的8/10，但

80vw

将是整个屏幕宽度的8/10。无反馈。这对你有帮助吗？如果有，请将其设置为答案。谢谢，但是使用

vw

或

%

有什么更好的方法？例如，将

115px

更改为

20vw

，您应该明白我的意思。%s使用父元素的宽度，而vw使用屏幕的宽度。这意味着如果父元素的宽度小于屏幕的总宽度，

80%

将是父屏幕宽度的8/10，但

80vw

将是整个屏幕宽度的8/10。无反馈。这对你有帮助吗？如果有，则将其设置为答案。

.toolbar {
    position: fixed;
    width:100%;
    top:0;
    left:0;
    height: 60px;
    border-bottom: 1px solid #E4E7ED;
    background-color: white;
}

.toolbar_navigation {
    display: flex;
    height: 100%;
    padding-left: 18px;
    justify-content: space-between;
    align-items: center;
}
.toolbar_logo{
    color:#bfa290;
    text-decoration: none;
    font-family: 'Segoe UI';
    font-weight: 510;
    margin-right: 115px;
    font-size: 25px;
    cursor: pointer;

}