在设计和开发响应式网站时，必须考虑一些重要的注意事项。

如今，互联网流量的很大一部分来自功能不同的移动设备，因此至关重要的是，任何新网站都必须在尽可能多的设备上使用。设计和开发适用于多种屏幕和设备的网站的过程通常称为“响应式Web设计”，有时也称为“自适应设计”（在响应式设计中也用于指代特定方法）。

今天，是否拥有一个响应式网站的问题已不再相关；答案是明确的“是！”，甚至Google也在那些不适合移动设备的网站之后放置了那些网站。真正的问题是如何执行成功且有效的多设备策略，而又不会超出预算或错过移动用户体验的重点。

任何有经验的网页设计师都应该精通使网站具有响应能力的技术。为了帮助您找到最适合您项目的匹配项，我们准备了一些问题和准则。在设计和开发响应式网站时，必须考虑一些重要的注意事项。

跨设备的内容策略

自适应设计不仅仅是将所有内容都适合任何屏幕尺寸。设计人员必须考虑到每种设备的使用环境及其功能。

由于移动技术的革命，网页设计师不得不考虑众多不同的软件和硬件平台。

有时，*跳过移动设备上的某些副本，使用替代副本或其他图像资产，因为网站的导航需要在不同屏幕之间进行更改。有时，应仅在移动设备上启用特定的内容或功能，例如“单击以致电给我们”按钮，基于用户的位置提供交互或显示所使用的特定设备的“应用程序下载”按钮。

问：我们必须为不同的设备准备不同的内容或资产吗？

有时是的。在某些情况下，需要进行此类更改：

通常情况下，对于小纵向屏幕，必须对图像进行不同的裁切。宽高比的图像非常适合桌面网站横幅，但是在竖直的智能手机屏幕上几乎无法使用。 如果大型演示视频在计算机屏幕上很不错，则可以用移动设备上的图像和文本代替它，尤其是当您希望来自移动互联网连接速度较慢的设备的流量时。 对于用户可能不会阅读的小屏幕设备，某些副本可能必须省略（或重写）。 某些号召性用语控件可能已更改为更适合该设备；例如，计算机上的“发送消息”可能会替换为手机上的“立即呼叫”。 在小屏幕上，*将复杂的图形，图表和长表保留为链接的独立页面，而不是将其包含在页面的内容流中。另一个想法是用不同的方式显示相同的数据，或仅显示最重要的部分。 对于不同的屏幕尺寸，应重新考虑导航，甚至应单独设计导航。这不一定与其可视化有关，而是通常包括不同的结构，例如链接的平面列表而不是下拉菜单/下拉菜单，或者通过在特定设备上更复杂的菜单中显示较少的深度。

不同屏幕上的布局优化

虽然侧面放置的计算机和较大的平板电脑提供了大量的水平空间来布置网站内容，但屏幕越小，则用于并排放置的元素的空间就越小。这就是为什么智能手机上的网站通常设计为只有一列布局。这是设计响应式网站时的主要问题之一：页面布局何时以及如何更改。

问：如何确保内容布局在不同设备上看起来不错？您使用什么技术来实现这一目标？

应根据流行的设备尺寸，类型和环境定义一些“断点”。这些是预定义的屏幕宽度（和较少的屏幕高度），其中页面布局从例如三列更改为两列，然后变为一列。当前，*的宽度断点是：

1920年及以后：电视屏幕和大型台式机显示器 1280至1920：对于绝大多数笔记本电脑，在横向模式（水平放置）下，许多现代台式机显示器以及大型平板电脑（通常为10英寸及以上） 800至1280：适用于横向模式的较小平板电脑以及较旧或较小的显示器 480至800：适用于平板电脑（纵向）（垂直放置）和智能手机（横向） 最多480：智能手机处于纵向模式

要@media在CSS代码中使用基于屏幕大小的不同样式，例如，仅在屏幕宽度大于480像素但小于800的设备上将段落的字体大小更改为14像素，将使用以下规则：

css @media (min-width: 480px) and (max-width: 799px) { font-size: 14px; }

另一个重要的考虑因素是将HTML代码按照需要在移动设备上显示的顺序放置。通常，编写干净，结构合理且语义正确的HTML代码对于顺利实施响应式网站大有帮助。

与不同设备上的用户界面交互

由于设备不仅屏幕大小不同，而且输入方法也不同，因此请确保每个UI元素在每种设备类型的上下文中均按预期工作。这意味着下拉菜单对于计算机屏幕应该是可以接受的，但是在智能手机和平板电脑上，用户希望导航方法更类似于移动应用程序上的导航方法。

问：如何确保UI正常工作并在不同设备上感觉自然？列举一些不适用于特定设备的交互模式。

不同的设备具有不同的功能，用户希望其设备上的网站能够以与其设备上的应用类似的方式运行。

台式机和移动用户界面之间最重要的区别是，台式机通常由鼠标或触控板以及快速且易于使用的键盘控制，而移动设备依赖于无指针的触摸屏以及带有经常使用起来很麻烦。另一个考虑因素是没有指针的设备还缺少悬停状态，该状态经常用于触发网页上的某些操作。指针和触摸屏这两种输入法也使不同的操作更容易（更自然）或更困难和更慢。例如，在屏幕上移动项目或在触摸屏上拖动更容易（因此，在桌面上避免了拖动），而使用鼠标指针单击较小的控件则容易得多（因此，UI控件应在触摸屏上变大）。

基于屏幕尺寸的资产优化

即使可以将相同的资产提供给不同的设备，也不意味着相同的图像大小或视频质量将是*的。为了减少加载时间，尤其是在移动Internet连接上，Web设计人员应注意它们为不同设备提供的资产。

例如，一张1920像素宽，400 KB的背景照片非常适合台式机，但在智能手机上会过分使用（明智的选择），而下载速度较慢（明智的选择文件大小）。因此，*使用较小尺寸的图像，如果用户的屏幕足够小，则可以使用该图像。而且，您不希望用户仅下载一个版本的用户下载两个版本。

问：无论屏幕大小如何，您是否提供相同的资产都重要吗？图像和背景在这方面有什么区别吗？

至少对于较大的图像文件而言，为移动设备和台式机屏幕使用单独的版本非常重要。可以向移动用户提供同一图像的较小副本，以减少加载时间。但是，对于移动设备，不应大幅减小图像尺寸（如果可行），因为它们的屏幕密度通常比台式机显示器高得多。应根据具体情况做出决定，因为某些图像的大小可以减小，而不会产生太大的视觉影响，而对于另一些图像，保留其细节很重要。

从技术上讲，背景图像（在CSS中定义）和内容图像（在HTML中作为图像文件包含）之间存在很大差异。可以轻松地在CSS中的不同媒体查询中分别设置背景，因此只有在用户屏幕与特定查询匹配时才提供每个版本。其他的则不是从Web服务器下载的。对于HTML中的图像，仍然没有内置的，有效的和受良好支持的方法来根据用户屏幕大小提供不同的文件。可以使用不同的技术来实现此目的，例如通过使用模拟即将到来的<picture>元素的行为的polyfill脚本，或具有自己约定的其他脚本，或使用CSS背景显示图像。

通常，应避免使用CSS方法，因为CSS图像背景没有任何语义含义，被视为修饰。此外，它缺乏可访问性，因为无法用标记具有的title和alt属性来描述<img>。

本文标题：在设计和开发响应式网站时，必须考虑一些重要的注意事项。
网页链接：/news7/192557.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有响应式网站等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联