响应式Web设计技巧,最佳实践和动态图像缩放技术

Question

我希望这个问题不会因为过于广泛的主题而被关闭,但我想知道响应/自适应网页设计,即所有浏览器,所有设备的一个网站.

在结构和布局方面,实施此类网站的最佳方式是什么？

我正在尝试阅读它,因为移动网站现在是最重要的事情,并且会有一段时间但我找不到提示和指南的清单,我想如果这样的资源可以在这里找到那么我们都可以受益.

另一件让我感到兴奋的是如何进行动态图像缩放？

在所有事情中,这是让我最困惑的事情,因为我猜测的布局可能是使用百分比而不是像素值来完成的,因为像素会因设备而异,但图像可能是实现一个网站的关键因素.

我期待着阅读人们的意见和答案,即使它只是链接到我没有找到的网络教程.

Answer 1

1.一个网站所有浏览器.

正如@Tak所说,这里的答案是"渐进式增强"和"优雅降级".然而,他给出的定义并不完全正确.这是正确的:

" 渐进式增强 "(参见链接)意味着您首先使用经过验证的技术(如HTML4和CSS1)对旧浏览器进行编码(使用/不使用IE6/7是一个很好的起点),然后在进度时添加增强功能通过在支持CSS3和大多数HTML5的移动设备上测试更现代的浏览器到Chome和Safari.这样,您的目标是为任何浏览器提供其中支持的最佳功能组合(它永远不会是完美的,因此请记住80/20规则,以避免将项目运行到地面).

" 优雅退化 "(见链接)有点像倒退,它是一种更懒惰的做法.您开始使用现代浏览器构建站点,然后应用"修补程序"和"修复程序",直到旧版浏览器可以接受.这最终创造了比从一开始就正确规划它更多的工作,这种方法通常会发生的事情是开发人员/利益相关者会在某个时候放弃(即,到底是什么？为了得到这个,它的工作太多了在IE6/7中工作 - 我只是去除它们的范围)

2.标准化布局的最佳方式

就个人而言,我的建议是,如果你想要一个跨移动和桌面设备的标准布局,我建议你使用BIG字体的组合(因此它们在微小的移动屏幕中可见)和小的(因此有桌面浏览器的人可以阅读桌面尺寸900-1000px宽度的所有细节.

这个网站就是一个例子:

http://www.valuetrader.net

当我在桌面浏览器中打开它时,我看到了很多细节,但是当我在旅途中使用我的智能手机时,所有关键信息(即我应该购买还是卖出分享？)显示在一个非常大的字体上在我的小屏幕上显得清晰可辨.

更新2014年

这部分问题现在已经有效地改为"什么是实施布局的最佳方式？" .

目前(以及最近几年广泛使用的CSS3支持)跨设备布局设计的标准方法是使用基于媒体查询的所谓"响应"布局.有许多CSS框架可供用户开始使用适合移动设备的布局.

"响应式"设计的基本原则是在移动设备上滚动使垂直空间几乎无穷无尽,因此您只受水平空间的限制.因此,您必须确保在屏幕变小时让页面流动以填充所有可用的水平空间,并且任何导航栏或水平元素都垂直折叠,以便项目堆叠在彼此之上而不是使用空间水平.

测试网站"响应性"的标准方法是拖动浏览器窗口的一侧以减少可用宽度.

更好的方法是使用开发人员工具,例如Chrome有一个切换设备模式的按钮,这是使用Stackoverflow的示例:

#site-banner在桌面和移动屏幕上指定元素布局的媒体查询示例如下:

/* DESKTOP SUPPORT */
#site-banner { width: 1000px; background: #fff; margin: 0px auto; height: 120px; }

/* TABLET SUPPORT - rules apply below 1000px width */
@media all and (max-width: 1000px) {
    #site-banner { width: 700px; }
}

/* PHABLET & MOBILE SUPPORT - rules apply below 700px width */
@media all and (max-width: 700px) {
    #site-banner { width: 480px; height: auto; }
}

/* MOBILE SUPPORT - rules apply below 480px width */
@media all and (max-width: 480px) {
    #site-banner { width: auto; height: auto;}
}

3.如何进行动态图像缩放？

移动设备为您做了很多这样的事情,所以通常您只需要了解它的工作原理.基本上,当第一批移动浏览器问世时,他们必须确保已经在桌面浏览器上工作的网站也在移动设备上工作(否则没有人会使用他们的智能手机浏览网页)所以他们不得不想出来巧妙的方法来检测网站的宽度,并将其调整为可用的屏幕分辨率.

例如,我的网站' www.desalasworks.com '编码为900px宽度,但通过在320px的小屏幕上缩小它可以正常工作(页面上的图像使用各种方法自动重新采样 - 例如最近邻居采样和双三次插值,尽可能用原生字体替换字体.就图像采样而言,如果你曾经在智能手机上捏了一张照片来"放大"和"缩小",你就会知道我在说什么.

你通常不需要担心CSS让你的图像正确重新采样,我注意到有时它们在使用百分比宽度时有点滑稽,所以坚持像素,如果这样的情况下,浏览器更容易告诉你的项目在哪里彼此的关系.请注意,您可以专门检测移动浏览器,并将您网站的宽度设置为320px,并将其中的所有内容设置为相应内联,但实际上,这不是必须在移动设备上安装工作网站,这样做会迫使您维护2个站点,一个移动站点和一个桌面站点(一些公司很乐意这样做).

4.百分比/固定宽度.

我个人倾向于使用以屏幕为中心的固定宽度(使用CSS边距:0px auto),我没有长时间使用百分比宽度,主要是因为标准化布局有点噩梦.如果你使用百分比宽度,你基本上必须做更多的测试,所以我倾向于转向它们.

请记住,这只是我的观点,一些"反复网络"专家会发布几乎所有事情的百分比宽度,我只是没有出售牺牲布局的可预测性的想法,我认为这是边际效益.但后来我来自构建桌面webapps的背景,如果我只专注于移动网络(水平空间非常珍贵,布局往往更简单),我可能会有不同的看法.