平板电脑/移动设备的 CSS 条件，而不仅仅是 <!--[if IE]>？

Question

我制作了一个在所有浏览器中都能正常显示的网站，但在手机或平板电脑上查看时，其粗细为 font-weight: 100; 的 body 字体就很好了。

有没有一种方法可以编写一个 css 条件来定位手机和平板电脑，类似于 IE 条件？

<!--[if IE]>
According to the conditional comment this is IE<br />
<![endif]-->

Answer 1

您应该使用媒体查询:http://www.w3.org/TR/css3-mediaqueries/

示例(引自 Bootstrap 网站):

/* Large desktop */
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }