css - 对于全 Angular 标题背景图像,您会使用哪种媒体查询堆栈?

标签 css media-queries

我经常像这个页面一样使用带有全宽背景图像的页眉 http://thegreatdiscontent.com/adam-lisagor

您会为背景图像使用哪种媒体查询堆栈? 我希望移动设备使用文件大小不太大的图像,但视网膜设备也有视网膜图像。 因此,也许有一些类似针对视网膜 mac 的大型媒体查询,可能是针对视网膜 ipad 的具有真正压缩图像的视网膜大小的查询。也许一个用于小型移动设备、视网膜和非视网膜……? 它变得非常复杂,当然我不想列出 20 个媒体查询来针对具有不同分辨率和不同(假设的)互联网速度的不同屏幕尺寸。

想法?您会优先使用哪些设备?

谢谢。

最佳答案

我认为您误解了 CSS 媒体查询的意义。他们不会更改正在提供的文件大小。 CSS只是客户端脚本。如果您想为较小的屏幕或较慢的互联网连接提供较小文件大小的图像,您需要在服务器端执行此操作。

看看自适应图像来做到这一点:http://adaptive-images.com/

媒体查询只允许您调整原始图像的大小,因此它仍会加载完整尺寸的图像,然后调整它的大小。

关于css - 对于全 Angular 标题背景图像,您会使用哪种媒体查询堆栈?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19247272/

相关文章:

javascript - 在事件类 css bootstrap 中添加背景图片

css - 如何使导航链接响应浏览器调整大小

css - 媒体查询似乎不适用于平板电脑或台式机

css - 移动绝对; 1600 分辨率的元素与媒体查询

html - 为什么尽管视口(viewport)具有 initial-scale=1.0,但自适应页面仍显示为放大状态

css - 如何将图像完美地固定到 Facebook 中的模态?

jQuery - 让重置按钮起作用

css - 使用 CSS 更改 SVG 高度

jquery - 如何访问:hover pseudo class with jQuery?

css - 仅在折叠下方滚动时显示一个元素