如何根据设备屏幕大小包含CSS以查看网页？
我想的是，在页面中只包含一个CSS文件，并在该CSS文件内部有一个参数，根据屏幕大小选择要导入的CSS。
我的另一个目标是减少加载页面的CSS数量（最多为2个，一个用于框架，例如Bootstrap，另一个用于基于屏幕大小的CSS选择器），以减少加载时间。
我还没有相关代码，因为我不知道如何实现。
4个回答
16
如果您想在页面中仅有一个CSS文件，但是在该CSS文件中您想要导入其他基于屏幕尺寸差异的CSS文件，那么您可以按照以下方式进行设置，例如对于小于960像素的屏幕：
@media screen and (max-width: 960px)
{
/* your imports */
@import url('/css/styles1.css');
@import url('/css/styles2.css');
}
如果你希望一般情况下只使用两个CSS文件，你可能需要搜索媒体查询并稍微研究一下 :)
有不同的方法可以为不同的设备和屏幕使用不同的样式，你可能会发现这篇文章对此很有用http://css-tricks.com/resolution-specific-stylesheets/
其中说，例如，你可以像这样指定想要显示CSS文件的屏幕尺寸;
<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
- Ekin
13
如果你想要响应式设计，你应该主要根据屏幕宽度进行设计，而不是特定的屏幕高度和宽度。尝试搜索“媒体查询条件加载CSS”，你会得到很多例子。要点是：
<link rel="stylesheet" media="screen and (min-width: 601px)" href="desktop.css" />
<link rel="stylesheet" media="screen and (max-width: 600px)" href="mobile.css" />
其中只有一个将会被加载。 http://christianheilmann.com/2012/12/19/conditional-loading-of-resources-with-mediaqueries/
不要使用 @import。它会减慢你的页面速度。 http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
- Buck
3
关于@import的链接非常老旧了。并且它适用于已经不存在的浏览器。 - Alexis Wilke
我刚在Firefox的“网络”中检查了一下，页面加载了它们两个。 - Jon Nezbit
@JonNezbit，浏览器必须下载所有的CSS文件，因此，例如，如果我们使用
potrait.css和landscape.css，它可以在方向更改时重新评估。然而，浏览器解析不需要的CSS会延迟。 - Dush3
您可以为不同的屏幕大小尝试使用不同的CSS样式。
/* min size style*/
@media screen and (max-width:320px) {
/* put your css style in there */
}
/* middle size style */
@media screen and (min-width:321px) {
/* put your css style in there */
}
/* large size style */
@media screen and (min-width:800px) {
/* put your css style in there */
}
- Vincent
1
如果您正在使用单个大的
CSS文件，则无论查询是否满足，浏览器都必须完全解析和处理所有样式块。这将影响较小设备的性能。 OP希望减少加载时间。 - Dush1
你可以加载另一个css文件（device.css），或者将其添加到你的css底部。媒体查询控制哪个css在哪个像素宽度下使用。
将目标限制在宽度小于600像素的任何内容。
@media (max-width: 600px) {
/* Insert Code Here */
}
将目标限制在宽度小于600像素的任何内容。
- jk_
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接