Question

如果页面宽度降至768像素以下，我会使用简单的CSS来调整文本大小：

<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像素时，它使用50px字体大小，而当更窄时，它使用20px，更小的字体大小。

我认为它反过来了 - 例如如果页面窄于768像素，它会在CSS的@media部分使用CSS - 但它似乎是相反的。

我只是昏暗吗？

非常感谢任何建议。

谢谢！

Answer 1

这是因为您使用的是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/

@media宽度和字体大小

1 个答案: