@ Media ширина и размер шрифта

Question

@ Media ширина и размер шрифта

0

У меня есть простой бит CSS, используемый для изменения размера текста, если ширина страницы падает ниже 768 пикселей:

<style type="text/css">
.rand1 {
  font: 20px/0.5 'Volkhov', serif;;
}


@media (min-width: 768px)
{
    .rand1 {
      font: 50px/1.3 'Volkhov', serif;;
    }
}                   

</style>
<link href='http://fonts.googleapis.com/css?family=Volkhov' rel='stylesheet' type='text/css'>

Он отлично работает - например, вы можете увидеть его на примерной странице здесь:

http://jimpix.co.uk/words/username-generator.asp?yours=Joy&go=yes&ul1=0&dt=d2

Меня смущает то, что когда страница имеет ширину/ширину более 768 пикселей, она использует размер шрифта 50 пикселей, а при более узком - 20 пикселей, меньший размер шрифта.

Я бы подумал, что это будет наоборот: например, если страница узкая, чем 768 пикселей, она будет использовать CSS в разделе @media CSS, но, похоже, наоборот.

Я просто тускнею?

Любые советы будут высоко ценится.

Благодарю!

Kees Sonnema 14 март 2014, в 10:07

Источник

0

Не вижу кунфузи. Вы говорите в CSS, что если страница имеет ширину не менее 768 пикселей, она должна использовать шрифт 50 пикселей. Иначе он должен использовать 20px. Таким образом, вы перезаписываете rand1, когда размер больше 768 пикселей.
Yunalescar 14 март 2014, в 09:06

Теги:

html

css

1 ответ

Ещё вопросы

Не вижу кунфузи. Вы говорите в CSS, что если страница имеет ширину не менее 768 пикселей, она должна использовать шрифт 50 пикселей. Иначе он должен использовать 20px. Таким образом, вы перезаписываете rand1, когда размер больше 768 пикселей.

Kees Sonnema · Answer 1 · 2014-03-14T06-56-00.000Z

Это связано с тем, что вы используете min-width вместо max-width. Итак, вы говорите: если страница более широкая, чем 768px, размер шрифта 50px.

Если вы измените свой код на:

.rand1 {
  font: 50px/1.3 'Volkhov', serif;;
}


@media (max-width: 768px)
{
    .rand1 {
      font: 20px/0.5 'Volkhov', serif;;
    }
}

Он будет делать то, что, как вы думали, будет.
Надеюсь, я объяснил это правильно.

http://css-tricks.com/css-media-queries/