响应式设计出错如何解决 - 北京传诚信

响应式设计出错（以及如何解决）

大多数使用响应式网站设计都使用它不正确，这会导致问题。响应式设计的一般方法是懒惰的，如果你采用这种方法，你的一些响应式网站将完美无缺地工作，其中很多都不会。对于那些完美运作的人来说，这可能归结为运气问题。

将多列布局折叠到单个列中的问题在于它不能按比例工作。如果你必须水平缩小某些东西并且你没有做任何其他改变，它显然会垂直扩展。

在将桌面设计分解为移动设计时，以下是一些值得考虑的事项：

1.“移动优先”是一个概念

作为一个概念，它并没有多大帮助，因为如果你真正设计出“移动优先”，那么除非你一直坚持纯粹的单一列布局，否则尝试将其扩展到桌面设计将是噩梦般的。

最好的方法是物理设计至少三种不同的布局。您可以考虑的最低要求包括：

桌面

肖像移动

如果你想要更加彻底，你还应该考虑：

巨大的桌面

普通桌面

大景观平板电脑

大肖像平板电脑

小景观平板电脑

小肖像平板电脑

大型景观移动

大型移动电话

小景观手机

小肖像移动

微小/可穿戴

有这么多不同的可能性，很明显为什么懒惰的“一刀切”方法如此诱人，但同样明显的是为什么有这么多方法可以毁掉它。

2.驯服那个庞大的页脚

桌面设计包括那些带有大量内部链接的巨大页面页脚？在桌面上可能非常方便。在移动设备上，它看起来很荒谬，并且不仅仅是一种烦人的触摸。您可以为每个设备断点设计完全不同的页脚。只需在模态对话框中提供这些页脚链接，每个人都会获胜。

3.您可以隐藏对核心消息没有贡献的内容

网站最重要的部分是核心信息。是的，在某些网站上，最重要的部分是广告，它们仅用于投放广告，但如果您必须在显示核心消息或展示广告之间进行选择，请选择消息。如果您隐藏核心内容然后提供大量广告，Google更有可能将您视为不受欢迎的角色。这是因为核心内容是谷歌为您编制索引的内容，并且当该内容未显示时，Google会将其视为具有欺骗性。

4.最好使用响应式图像

所有图像应尽可能响应。这带来了有时如果缩小太多，图像的细节可能会丢失。此问题的解决方案是使图像可单击，以便用户可以查看与内容分开的图像的放大版本。执行此操作的常规方法是通过模式对话框。

5.您可以使用其他背景

布局应始终设计为容纳内容。如果由于某种原因布局无法保存内容，则应重新设计布局，而不是内容。很有可能为不同的设备使用不同的背景。你是一名设计师。动用你的想象力。

内容是网站的生命线，根据布局的限制对其进行修改或限制，这是网站所有者业余性的明显标志，并表明布局设计不合理。地点。坚持你的原则，因为如果你默许，那个客户将会遇到麻烦。

客户永远是对的，除非该客户是网站设计客户。客户很少知道什么对他们最有利，而且自称是一个知道如何为客户提供正确结果的网站设计师是很重要的。

6.手动控制折叠顺序（或避免内容中的空间参考）

拖累所见即所得的网站建设者所面临的问题之一就是你通常无法决定div的堆积顺序，在极少数情况下你可以做到这一点，你的辛勤工作每次都会被取消你做了最小的编辑，你将不得不重新进入并破解源代码。

如果您不控制折叠顺序，此图像会清楚地解释可能出现的问题。此外，您应该避免在移动设备上进行空间参考（例如“在左侧列中”），无论左侧还是右侧的任何内容都可以转移到上方或下方，另外如果您让读者认为它足够重要，可以滚动看，然后他们将不得不再次向后滚动。

7.对于不同的布局，您可能需要不同的字体大小

使用CSS可以轻松控制字体大小，您可以为特定尺寸的显示设置不同的字体大小甚至不同的字体（如果它们看起来更好）。您可以使用CSS媒体查询找到显示大小，然后将字体大小或字体修改为可显示内容的值，以便最大限度地利用您要定位的设备类型。

响应式网站设计的概念很简单，但其非常简单是导致人们轻易犯错误的原因。拥有多年经验的设计师已经习惯于为桌面设计，因此他们通常会根据桌面布局来规划设计。