我有一个网站，其中包含以下内容来控制体验：
<link rel="stylesheet" media="only screen and (min-device-width: 481px)" href="styles.css"/>
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="mobile.css"/>
基本上，该网站的设计类似于1996年的网站，然后这些风格旨在使其现代化。移动设备应该有一套样式，平板电脑和另一套计算机。
这很好用（虽然我可能需要更改480到640才能抓住一些较大的智能手机，我无法测试）。
我试图解决的问题是侧边栏。文档末尾有一小部分显示在页面的右侧，但对于移动设备，它有display:none，因此不会显示。一些内容是来自画廊的随机照片缩略图，以及广告等。我想要它，所以这个内容不下载（~200KB），而不是像我现在一样隐藏它。什么是最好的方法？
答案 0 :(得分：0)
图像是从数据库动态加载还是只是设计或平面HTML / CSS内容的一部分？
如果是后者，最简单的方法是将图像作为背景图像加载到CSS中，而不是使用HTML中的标记。然后，您编写的媒体查询完全控制了图像的下载。
当然这会导致从HTML中删除标记的不利影响，如果图像对您的搜索引擎优化等重要，则可能会出现问题。