css - 响应式设计首先加载什么？

Question

我刚刚读完了 yiibu 的关于诺基亚响应式网站开发的幻灯片，其中一个较大的观点似乎是首先关注移动设备，然后是桌面设备和其他更大更快的平台。 ( http://www.slideshare.net/yiibu/pragmatic-responsive-design ) 不仅在规划阶段，而且从字面上开发您的响应式设计，在没有应用媒体查询的情况下，初始样式将是您最小平台的设计，具有最低功能。 (旧手机，取决于您的听众)这与我最初想做的事情(以及我所看到的其他人通常做的事情)相反。

基本原理是，这种方法可以防止带宽较低的移动设备上的人下载额外的脚本和大图像，方法是最初只下载最小设备所需的脚本和图像，然后加载更多，更多，这取决于设备的尺寸和预测功能，最终将最大的负担放在最大的设备(笔记本电脑和台式电脑)上。 --- 这与我一直在做的事情相反，我的工作是为桌面设计，然后添加媒体查询以针对移动设备进行优化。

---

我的问题是，我是否需要先针对移动设备进行设计，然后添加媒体查询以针对具有更多功能的大型设备进行优化，从而避免下载不会在移动设备上使用的大型图像的负担？

.....或者我可以只使用单独的样式表并在调用针对大型浏览器/设备的样式表之前调用移动样式表吗？

Answer 1

您先调用谁的顺序无关紧要。媒体查询本身是一堆 if-else，基于您在其中放置的条件(设备、方向、宽度等)。因此，首先或最后添加它们并不意味着手机会考虑桌面浏览器的样式表(示例)。

不过，您应该做的是在所有设备可读的基本样式表上拥有在所有设备上保持一致的基本内容(例如排版、字体大小、元素的背景颜色、文本颜色)。

这使得文件的实际读取更小，因为将根据屏幕的实际尺寸为边距、填充和宽度制作特定样式表。

最后但同样重要的是，至于您是否应该首先设计移动体验，这取决于您、您的工作方式等等。我知道我不知道。我首先为桌面设计，然后逐步深入。我更喜欢这个。