html - 调整字体和图片大小

Question

我有一个网页，喜欢桌面上的全屏快照。菜单有一些亚洲字体，不用担心。

html:

<header>
    <div class="nav">
        <ul class="menu">
            <li>@Html.ActionLink("主页", "Index", "Home")</li> // asp.net mvc link
            <li>@Html.ActionLink("关于教会", "About", "Home")</li>
            <li>@Html.ActionLink("联系方式", "Contact", "Home")</li>
            <li>@Html.ActionLink("主日证道", "Sermon", "Home")</li>
            <li>@Html.ActionLink("教会活动", "Activity", "Home")</li>
            <li>@Html.ActionLink("社区服务", "Community", "Home")</li>
        </ul>
    </div>
</header>

对应的css:

.nav {
float: left;
}
/* menu
 ----------------------------------------------------------*/
ul.menu {
    font-size: 1em;
    font-weight: 600;
    margin: 0 0 5px;
    padding: 0;
    text-align: right;
 }

 ul.menu li {
    border: 1px solid #FF9933;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    display: inline;
    list-style: none;
    padding-left: 10px;
    padding-right: 10px;
 }

    ul.menu li a {
        background: none;
        color: #336699;
        text-decoration: none;
    }

        ul.menu li a:hover {
            color: #333;
            text-decoration: none;
        }

 header {
    border-style: solid;
    border-width: 8px;
    background-color: rgb(175, 175, 175);
    background-image: -webkit-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    color: #336699;
    padding: 20px 40px 30px 40px;
  }

一旦我将它放大到中等大小，图像就变成了:

您看到菜单没有挤在一起，我认为是因为字体大小是固定的。如何相应调整呢？是响应式网页设计吗？我刚听说这个词。

另外请注意，图片的大小是固定的，例如 500x400，是否也可以调整？

Answer 1

这是media queries的地方发挥作用，在您的 css 中设置阈值/断点并相应地应用不同的样式

例如:

@media screen and (min-width: 320px) and (max-width: 599px) {
.menu_font
{
font-size:10px; /* set the size as you see fit*/
}
}

==编辑更有意义==

/* menu
 ----------------------------------------------------------*/
 @media screen and (min-width: 320px) and (max-width: 599px) {
ul.menu {
    font-size: 0.75em;
    font-weight: 600;
    margin: 0 0 5px;
    padding: 0;
    text-align: right;
 }
}