Настройка шрифта и размера изображения

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

После того, как я ее увеличить до среднего размера, изображение стало:

You см. меню не сжимается вместе, я думаю, потому что размер шрифта исправлен. Как отрегулировать его соответственно? Это отзывчивый веб-дизайн? Я только что услышал этот термин.

Кроме того, обратите внимание, что размер изображения фиксированный, говорят 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*/ 
} 
} 

== Edit, чтобы сделать больше смысла ==

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