Как изменить свойство CSS id в зависимости от размера экрана

Question

Как изменить свойство CSS id в зависимости от размера экрана

0

Я знаю, как использовать функциональность медиа-экрана, но хочу попросить вас, ребята, что-то еще, что мне действительно нужно для моего проекта. Позвольте мне вставить фрагмент кода, чтобы я мог подробно рассказать вам, что я ищу. Ниже я вставляю идентификатор css, который я сделал для моего дизайна сайта:

#Disp_name {
color: #424854;
font-family: 'Open Sans',sans-serif;
font-size: 5.5em;
font-weight: bold;
line-height: 105px;
/*margin: 200px 0 25px;*/
margin: 0px 0 25px;
text-rendering: optimizelegibility;
transition: color 0.3s ease 0s; }

Теперь я хочу, чтобы кто-нибудь открыл мой проект с маленького экранного устройства, например ** Когда открыто от 400 до 450 пикселей, размер шрифта будет 4em, а если> 300 и <400px, то 3em и если меньше, чем <300px, тогда 2em.

Что мне делать? Пожалуйста помоги

iSaumya 22 сен. 2013, в 15:52

Источник

Теги:

html

css

2 ответа

3

использовать медиа-запросы в вашем css

например:

@media screen and (max-device-width: 480px) {
  .classname{
    font-size: 6em;
  }
}

Sid M 22 сен. 2013, в 12:02

0

Я пробовал приведенный выше код, и когда я уменьшаю размер экрана, размер шрифта не уменьшается. Я использую следующий код: @media screen and (max-device-width: 480px) { #Disp_name{ font-size: 2em !important; } }
iSaumya 22 сен. 2013, в 13:54
0

вам нужно указать свойство max-device-width для разной ширины, как упомянул @zeaklous, это был просто пример, как я упоминал выше в своем ответе.
Sid M 22 сен. 2013, в 14:01

Ещё вопросы

Я пробовал приведенный выше код, и когда я уменьшаю размер экрана, размер шрифта не уменьшается. Я использую следующий код: @media screen and (max-device-width: 480px) { #Disp_name{ font-size: 2em !important; } }
вам нужно указать свойство max-device-width для разной ширины, как упомянул @zeaklous, это был просто пример, как я упоминал выше в своем ответе.

Zach Saucier · Accepted Answer · 2013-09-22T11-09-00.000Z

Как сказал DevIshone, медиа-запросы - именно то, что вы ищете. В этом случае он будет выглядеть примерно так

@media (max-width: 450px) and (min-width: 400px) {
    font-size: 4em;
}
@media (max-width: 400px) and (min-width: 300px) {
    font-size: 3em;
}
@media (max-width: 300px) {
    font-size: 2em;
}

Большое спасибо. Как раз то, что мне было нужно. Вот почему я люблю Stackoverflow ... :)