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

Css 最佳实践:样式表:小型设备,css,media-queries,mobile-devices,Css,Media Queries,Mobile Devices,在为站点编写层叠样式时,我们可以使用媒体查询为小型设备指定层叠样式 e、 g.@仅媒体屏幕和(最小宽度:480px)和(最大宽度:767px){} 可以在特定页面级别(例如html)、样式表链接或.css本身中输入 更好的做法是提供完全独立的样式表,加载主样式表并被“仅移动”版本覆盖,还是在样式表内覆盖选择器?(大概布局的样式是相互排斥的) 此外,您是否应该首先尝试从读取不适用的样式中排除较小的设备,以避免不必要的工作 最后,开发人员是否应该通过关注不太可能与较小设备不兼容的响应风格来避免这些问

在为站点编写层叠样式时,我们可以使用媒体查询为小型设备指定层叠样式

e、 g.
@仅媒体屏幕和(最小宽度:480px)和(最大宽度:767px){}

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

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

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


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

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


看看《波士顿环球报》的样式表——

并非所有属性都会受到屏幕大小(背景、颜色等)的影响。您应该使用默认样式表,并将相关属性的覆盖包含在媒体查询的末尾。