带滚动功能的自适应网站

[subornaakter20]

滚动块

为了节省空间，许多网站使用滚动块。如果这是 PC 或笔记本电脑的屏幕，则使用鼠标进行滚动，也就是说，没有任何特殊问题。但移动设备的工作原理不同：用户从上到下滚动页面（反之亦然），并且块占据了整个屏幕的宽度，一个接一个地排列。

下载有用的文档：

清单：如何在与客户谈判中实现你的目标
结果很容易预测：网站块向下滚动，直到出现具有自己滚动条的块，现在访问者必须滚动浏览该块的所有页面才能继续工作。

这个问题的解决并不那么困难。如果站点的 乔丹号码数据 自适应布局允许您通过单击来展开块或者以全高显示它们，那就更好了。不建议在窄屏幕上使用滚动。

无法折叠的菜单
自适应网站布局_不可折叠菜单

自适应网站布局应该解决一个非常重要的问题：功能元素应该变得紧凑，但仍可让访问者访问。在小屏幕上，所有元素都排列在一个无限的队列中（与 PC 显示器不同）。因此，菜单值得特别关注。

首先，因为它总是很笨重并且覆盖了整个屏幕，从而剥夺了自由滚动的可能性（用户触摸屏幕时肯定会单击其中一个菜单按钮并进入某个页面）。

实践经验表明了解决这个问题的办法：移动设备的屏幕上应该出现一个带有帮助和菜单的特殊图标。

悬停时，触发事件
通常，网站上会设置一些事件，当光标悬停在它们上面时就会触发这些事件（工具提示、照片、下拉菜单）。但移动设备的工作方式略有不同：它没有我们在使用 PC 或笔记本电脑时所习惯的光标。

触摸屏幕元素会引起相当于鼠标单击（按下）的事件。因此，触摸后必须采取的动作会造成一定的不便。自适应网站布局应该考虑到这个细微差别，或者更好的是，完全摆脱这样的事件。

活动元素和字体太小
自适应网站布局_小字体

值得记住的是，减小屏幕尺寸意味着减小字体大小，因此，在 PC 显示器上易于阅读的文本几乎不可能在智能手机屏幕上看清。

还值得考虑的事实是，平板电脑或智能手机通常是“在旅途中”使用的，这会增加一些问题。

Yandex 建议对网站的移动版本使用 12px 字体（不要更小）。

这也适用于网站的交互元素（按钮、链接等）。单击显示器上的鼠标光标比用手指单击小按钮更容易。

因此，当尝试创建一个紧凑的网站时，不要以减小字体大小和活动元素为代价。否则，效果就会与预期相反：由于使用该资源的不便，人们对它的兴趣会开始下降。

让我们总结一下：

自适应网站布局不仅限于在一个垂直列中排列内容。考虑电脑显示器和移动设备之间可用性的差异非常重要。

需要明确规划内容结构，并做出必要的更改。

不建议在移动设备上使用滚动块、无法折叠的菜单、通过触摸触发的元素、小字体和小型活动元素。