最佳实践:样式表:小型设备

时间:2012-10-27 11:30:19

标签: css media-queries mobile-devices

为网站编写级联样式时,我们可以使用媒体查询为小型设备指定

e.g。 @media only screen and (min-width: 480px) and (max-width: 767px) {}

可以在特定页面级别(例如.html),样式表链接中输入,也可以在.css本身中输入。

更好的做法是提供完全独立的样式表,加载主样式表并被“仅限移动”版本覆盖,还是在样式表本身中覆盖选择器? (推测布局的样式将是互相排斥的)

您是否应该尝试排除较小的设备首先阅读不适用的样式,以避免不必要的工作?

最后,开发人员是否应该通过专注于不太可能与较小设备不兼容的响应式风格来完全避免这些问题?

1 个答案:

答案 0 :(得分:0)

我不会加载额外的样式表 - 这只是一个不必要的请求。您应该使用@media查询覆盖主样式表中样式下的样式。

查看Boston Globe的样式表 - http://bostonglobe.com/css/html5reset.css,globe-globals.css,globe-masthead.css,globe-nav.css,globe-nav-menus.css,globe-saved.css,globe-main.css,globe-footer.css,globe-print.css