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;
 }
}

调整字体和图片大小

1 个答案: