Question

我创建了一个可以在所有浏览器中呈现的网站，但是当在手机或平板电脑上查看权重为font-weight: 100;的正文字体时，效果会很好。

有没有办法可以针对手机和平板电脑编写css conditonal，类似于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) { ... }

Answer 2

移动设备没有条件评论，因为它们应该与桌面浏览器完全相同。（顺便说一句，我认为这是一团糟。响应式设计很好，但不是一切的解决方案）

Answer 3

OP，

在CSS中，您可以media queries根据正在查看它们的屏幕大小有条件地隐藏/显示/修改元素。

CSS

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

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

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


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

通过响应式设计Twitter Bootstrap Docs。希望这会有所帮助。

平板电脑/手机的CSS条件，而不仅仅是<！ - [if IE]>？ - >

3 个答案:

CSS