似乎 px-s 与设计中的不一样答案

【问题标题】：seems px-s are not the same as in design似乎 px-s 与设计中的不一样
【发布时间】：2022-01-21 05:28:02
【问题描述】：

我的项目中有标题面板，其中汉堡按钮的设计宽度为 32 像素，高度为 24 像素。

.header {
    display: flex;
    font-weight: bold;
    font-size: 50px;
    height: 100px;
    border: 1px solid black;
    position: relative;
    justify-content: space-between;
    align-items: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>blueeye</title>
    <link rel="stylesheet" href="index.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100&display=swap" rel="stylesheet">
</head>
<body>
    <div class="header">
        <div class="logo">
            <span class="logoStart">blue</span><span class="logoEnd">eye</span>
        </div>

        <div class="BurgerMenu">
            <div class="menuLine menuLine1"></div>
            <div class="menuLine menuLine2"></div>
            <div class="menuLine menuLine3"></div>
        </div>
    </div>
</body>
</html>

* {
    font-family: 'Montserrat', sans-serif;
    padding: 0;
    margin: 0;
}

.header {
    display: flex;
    font-weight: bold;
    font-size: 50px;
    height: 100px;
    border: 1px solid black;
    position: relative;
    justify-content: space-between;
    align-items: center;
}

.logo {
    margin: 16px;
    font: normal normal bold 40px/49px Montserrat;
}

.logoStart {
    color: #041731;
}

.logoEnd {
    color: #1B6FE0;
}

.menuLine {
    height: 6px;
    width: 32px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background-color: #041731;
    margin-bottom: 3px;
}

.BurgerMenu {
    margin-right: 16px;
}

* {
    font-family: 'Montserrat', sans-serif;
    padding: 0;
    margin: 0;
}

.header {
    display: flex;
    font-weight: bold;
    font-size: 50px;
    height: 100px;
    border: 1px solid black;
    position: relative;
    justify-content: space-between;
    align-items: center;
}

.logo {
    margin: 16px;
    font: normal normal bold 40px/49px Montserrat;
}

.logoStart {
    color: #041731;
}

.logoEnd {
    color: #1B6FE0;
}

.menuLine {
    height: 6px;
    width: 32px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background-color: #041731;
    margin-bottom: 3px;
}

.BurgerMenu {
    margin-right: 16px;
}

我在浏览器中得到这个

但在设计中似乎汉堡图标更大。我给出了与设计中相同的高度和宽度参数。

设计中的标题

我做错了什么，我无法获得与设计相同的视图？

【问题讨论】：

你能显示按钮的html和样式吗？
@skara9 你可以看到，我已经更新了

标签： javascript html css user-interface frontend

【解决方案1】：

<meta name="viewport" content="width=device-width, initial-scale=1">

我应该在我的 html 页面中添加这个

【讨论】：