媒体查询加载资源? [英] Media Queries to load resource?

问题描述

我想将较大的CSS文件分解为单独的专用样式表-一个用于移动设备，平板电脑和台式机的样式表.目的是要减少在移动设备上下载的数据量(为什么当我可以下载仅用于移动设备的40kb文件时，为什么下载包含移动平板电脑和台式机样式的600kb css文件呢?).

I am wanting to break apart my rather large CSS file into separate, specialised, stylesheets - one for mobile, tablet and desktop. The purpose being I want to reduce the amount of data being downloaded on mobile (why download 600kb css file containing mobile tablet and desktop styles when I can download a 40kb file just for mobile instead?).

是否可以使用媒体查询来仅加载所需的样式表?

我尝试过:

@import url(mobile.css) (max-width:599px);
@import url(tablet.css) (min-width:600px);
@import url(desktop.css) (min-width:1200px);

和

<link rel='stylesheet' media='screen and (max-width: 599px)' href='mobile.css' />
<!-- and again for tablet and desktop -->

但是在开发人员工具中，无论我使用哪种技术，我都可以看到浏览器下载了所有三个CSS文件.

but in developer tools I can see that the browser downloads all three css files regardless of which technique I use.

是否可以使用媒体查询仅加载所需的资源?

我知道使用matchMedia的JS方法，但是我正在寻找仅CSS的解决方案.

I am aware of a JS approach using matchMedia but I am looking for a CSS only solution.

请阅读问题-我想基于媒体查询加载特定的样式表.所有浏览器都下载所有样式表，而与媒体查询属性无关，这使拥有仅用于移动设备的样式表变得毫无意义！ 如何仅基于媒体查询下载我想要的样式表?

Please read the question - I want to load a specific stylesheet based on media query. ALL browsers download ALL stylesheets regardless of media query attribute, which defeats the point in having a mobile-only stylesheet! How do I download ONLY the stylesheet I want based on media query?

推荐答案

如果这样做，您的网站将不会响应.回应者说，设计不仅要适应各种设备的分辨率，而且台式机屏幕的宽度为600 px时，您必须显示平板电脑的版本，对吗?减少文件的最佳方法是在生产版本中将所有CSS压缩为一个文件，而在开发版本中，您将所有CSS分割为

If you make this, your site will not be responsive. Responsive said that design adapts to resolutions, not only devices, and when a desktop screen has a 600 px width you must to show tablet version, no? The best way to reduce the files is minifying all your css in one file in production version, and in dev version you have got all splitted css

这篇关于媒体查询加载资源?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！