草庐IT

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

coder 2023-08-01 原文

我希望这个问题不会因为涉及面太广而最终被关闭，但我想知道响应式/自适应Web设计，即一个适用于所有浏览器和所有设备的网站。

在结构和布局方面，实现此类站点的最佳方法是什么？

我一直在尝试阅读它，因为移动网站现在是一件大事，而且会持续一段时间，但是我找不到提示和指南的列表，我认为如果可以在SO上找到这样的资源那我们都可以受益。

让我着迷的另一件事是如何动态缩放图像？

在所有事情中，这最让我感到困惑的是，我猜测的布局可能是使用百分比而不是像素值完成的，因为像素在一种设备之间会有所不同，但是图像可能是在一个网站上实现所有功能的关键因素。

我期待阅读人们的意见和答案，即使这只是我找不到的网上教程的链接。

最佳答案

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

正如@Tak提到的，这里的答案是“渐进增强”和“优雅降级”。但是他给出的定义不太正确。这里是合适的:

'渐进式增强'(see link)意味着您首先使用经过测试的技术(例如HTML4和CSS1)为旧浏览器编码(IE6 / 7，带有/不带有JavaScript是一个很好的起点)，然后在您添加增强功能通过在支持CSS3和大多数HTML5的移动设备上测试较现代的浏览器(包括Chome和Safari)取得进步。这样，您的目标是为任何浏览器提供可能受其支持的功能的最佳组合(顺便说一句，它永远不会是完美的，因此请记住80/20 rule以避免将项目运行到地面)。

'优美的降级'(see link)有点相同，但是倒退了，这是一种更懒惰的方式。您开始使用现代浏览器构建网站，然后应用“补丁”和“修复”，直到在较旧的浏览器上被接受为止。最终，这比从一开始就进行适当的计划创建了更多的工作，而这种方法通常会发生的事情是，开发人员/利益相关者将在某个时候放弃(即，到底是什么？要完成这项工作的太多工作)在IE6 / 7中工作-我将对其进行范围界定)

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

就个人而言，我的建议是，如果要在移动设备和台式机设备上使用标准布局，建议您使用BIG字体(以便在小巧的手机屏幕上可以看到)和小字体(以便拥有台式机浏览器的人可以阅读)组合使用所有详细信息)放在桌面大小为900-1000px的宽度上。

该站点是一个示例:

http://www.valuetrader.net

当我在桌面浏览器中打开它时，会看到很多细节，但是当我在旅途中使用智能手机时，所有关键信息(即我应该买还是卖股票？)都以非常大的字体显示在我的小屏幕上看起来清晰可辨。

2014年更新

问题的这一部分现已有效地更改为“实现布局的最佳方法是什么？”。

目前(以及最近几年对CSS3的广泛支持)，跨设备布局设计的标准方法是使用基于 media queries 的所谓“响应式”布局。有许多CSS frameworks可用来使用户开始使用适合移动设备的布局。

“响应式”设计的基本原理是，在移动设备上滚动时，垂直空间实际上是无限的，因此您仅受水平空间的限制。因此，您必须确保随着屏幕变小，让页面流动来填充所有可用的水平空间，并且将任何导航栏或水平元素垂直折叠，以使项目彼此堆叠而不是使用空间水平地。

测试网站“响应能力”的标准方法是拖动浏览器窗口的一侧以减小可用宽度。

更好的方法是使用开发人员工具，例如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的小屏幕上缩小比例，它可以正常工作(页面上的图像使用多种方法(例如resampled和nearest-neighbour sampling以及字体)自动变成bicubic interpolation尽可能替换为本地字体)。就图像采样而言，如果您曾经在智能手机上捏过一张照片以“放大”和“缩小”，那么您知道我在说什么。

您通常不需要担心CSS来使图像正确地重新采样，我注意到有时使用百分比宽度时它们有些有趣，因此请坚持使用像素，这样可以使浏览器更容易分辨出项目位于何处彼此之间的关系。请注意，您可以专门检测移动浏览器，并将站点的宽度设置为320px，并且其中的所有内容都相应地位于行内，但实际上，在移动设备上安装工作站点不是必需的，这样做会迫使您维护2个站点，一个移动站点和一个桌面站点(有些公司很乐意这样做)。

4.百分比/固定宽度。

就我个人而言，我倾向于使用以屏幕为中心的固定宽度(使用CSS边距:0px自动)，我很长时间没有使用百分比宽度，这主要是因为它有点麻烦，无法标准化布局。如果您使用百分比宽度，则基本上必须进行更多测试，因此我倾向于远离它们。

请记住，这只是我的观点，某些“响应式网络”专家将几乎对所有内容都采用百分比宽度，我只是出于牺牲边际可预测性的想法而卖掉了，我认为这是边际 yield 。但是后来我来自构建桌面Web应用程序的背景，如果我只专注于移动Web(水平空间非常宝贵，布局往往更简单)，我可能会有所不同。

关于html - 响应式Web设计技巧，最佳实践和动态图像缩放技术，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8429058/

技巧htmlbrstrongnoreferrercssresponsive-design

有关html - 响应式Web设计技巧，最佳实践和动态图像缩放技术的更多相关文章

  1. ruby-on-rails - 使用 Ruby on Rails 进行自动化测试 - 最佳实践 - 2

    很好奇，就使用ruby​​onrails自动化单元测试而言，你们正在做什么？您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您？git中的预提交Hook？只是手动调用？我完全理解测试，但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的，并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您？ 最佳答案 不确定您到底想听什么，但是有几个级别的自动代码库控制:在处理某项功能时，您可以使用类似autotest的内容获得关于哪些有效，哪些无效的即时反馈。要确保您的提

  2. ruby-on-rails - Rails - 子类化模型的设计模式是什么？ - 2

    我有一个模型:classItem项目有一个属性“商店”基于存储的值，我希望Item对象对特定方法具有不同的行为。Rails中是否有针对此的通用设计模式？如果方法中没有大的if-else语句，这是如何干净利落地完成的？ 最佳答案 通常通过Single-TableInheritance. 关于ruby-on-rails-Rails-子类化模型的设计模式是什么？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.co

  3. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  4. ruby - 解析 RDFa、微数据等的最佳方式是什么，使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  5. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  6. ruby-on-rails - 使用 rails 4 设计而不更新用户 - 2

    我将应用程序升级到Rails4，一切正常。我可以登录并转到我的编辑页面。也更新了观点。使用标准View时，用户会更新。但是当我添加例如字段:name时，它​​不会在表单中更新。使用devise3.1.1和gem'protected_attributes'我需要在设备或数据库上运行某种更新命令吗？我也搜索过这个地方，找到了许多不同的解决方案，但没有一个会更新我的用户字段。我没有添加任何自定义字段。 最佳答案 如果您想允许额外的参数，您可以在ApplicationController中使用beforefilter，因为Rails4将参数

  7. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  8. ruby-on-rails - 每次我尝试部署时，我都会得到 - (gcloud.preview.app.deploy) 错误响应 : [4] DEADLINE_EXCEEDED - 2

    我是Google云的新手，我正在尝试对其进行首次部署。我的第一个部署是RubyonRails项目。我基本上是在关注thisguideinthegoogleclouddocumentation.唯一的区别是我使用的是我自己的项目，而不是他们提供的“helloworld”项目。这是我的app.yaml文件runtime:customvm:trueentrypoint:bundleexecrackup-p8080-Eproductionconfig.ruresources:cpu:0.5memory_gb:1.3disk_size_gb:10当我转到我的项目目录并运行gcloudprevie

  9. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

  10. ruby-on-rails - 添加回形针新样式不影响旧上传的图像 - 2

    我有带有Logo图像的公司模型has_attached_file:logo我用他们的Logo创建了许多公司。现在，我需要添加新样式has_attached_file:logo,:styles=>{:small=>"30x15>",:medium=>"155x85>"}我是否应该重新上传所有旧数据以重新生成新样式？我不这么认为……或者有什么rake任务可以重新生成样式吗？ 最佳答案 参见Thumbnail-Generation.如果rake任务不适合你，你应该能够在控制台中使用一个片段来调用重新处理!关于相关公司

随机推荐