不要寻找“标准屏幕分辨率”
不仅设备不同，浏览器也不同
从移动布局开始
图像必须适合所有设备
移动菜单布局是一个单独的问题
考虑手势
不要让响应式布局针对设备完全不同
寻找优秀的开发人员来提供帮助
正如我们在关于自适应网站设计的必要性 的文章中已经讨 佐治亚州 whatsapp 号码数据库 论过的那样 ，通过这种布局，网站可以适应用户的设备。
自适应是 Web 界面的新标准。开发一个网站的桌面版本就足够的时代已经一去不复返了。移动设备已经占领了市场，网页设计师必须考虑他们的作品在所有设备上的外观。于是，跨设备布局成为了很多专业人士头疼的问题。
218-1.png
为了帮助您了解该方法的特点，我们从知名专业资源中收集了有关如何进行自适应设计的技巧：99designs、The Next Web、WIRED。
不要寻找“标准屏幕分辨率”
没有标准。专家建议至少为三种类型的设备开发响应式网站布局：
小：宽度最大 600 像素。这是针对手机的。
中：600 像素–900 像素。这些设备包括平板手机、平板电脑和小型上网本。
大：900 像素。这些是笔记本电脑和显示器。
我们从俄罗斯一家大型网络工作室的代表那里听到了另一个版本。他们开发了 5 种分辨率的设计：
320x568像素
360x640像素
768x1024像素
768x1366像素
1080x1920像素
一般来说，至少需要三个版本，然后一切都取决于您的能力和用户。如果时间和预算允许，您可以至少为客户使用的每台设备创建布局。
不仅设备不同，浏览器也不同
每个浏览器都有自己的显示内容的方法。这使得响应式网站变得更具挑战性。当您意识到浏览器有不同的版本并且客户端不一定使用最新的版本时，事情会变得更加混乱。
该怎么办？尝试在尽可能多的设备上测试移动和桌面布局。使用特殊软件，例如，Am I Responsive ?到目前为止，还没有发明出更好的方法来测试该网站的自适应版本。
218-2.png
这就是“我的响应式”的工作原理吗？
从移动布局开始
“移动优先”这个词已经引起了人们的注意，但并没有失去其相关性。大多数问题出现在文本和徽标上。很明显，如果文本在手机上可读，那么在平板电脑上、然后在台式机上遇到的问题就会更少。
图像必须适合所有设备
如果图像有很多细节，移动版本可能看起来不太好。如果您为每个设备使用单独的 HTML，则可以为较小的屏幕上传单独的图像。如果布局像 Bootstrap 一样有弹性，您将必须简化图像并消除视觉碎片。
移动菜单布局是一个单独的问题
大多数情况下，移动设备上的菜单项隐藏在“汉堡”图标中：
218-3.png
汉堡菜单是一个可识别的元素，用户通常知道如何使用它。但许多用户体验专家批评这种方法，因为你必须单击两次或更多次才能到达某个元素。相反，他们建议显示尽可能多的菜单项。
如果选项卡栏未使用，则可以将其隐藏 - 例如，当用户向下滚动功能区时。向上滚动时，菜单出现在屏幕顶部。
在移动设备上的导航方面，专家最常赞扬 YouTube 解决方案：
218-4.jpg
考虑手势
在平板电脑和移动设备上，人们喜欢使用手势控制内容：
点击（Tap）是一次点击
滑动 - 左右滚动屏幕
滚动 - 上下滚动屏幕
长按 - 就像右键单击
捏
传播
双击
用力按压
设计师的任务是在自适应网站模板中使此类手势变得方便。例如，考虑一下，在小屏幕上很难点击轮播照片库中的点。
218-5.png
IT CHEF 的“轮播”照片库示例
根据 Apple 指南，tap 元素的最小尺寸为 44x44px。然而，这个标准经常被违反，网页设计师将图形缩小到25x25px。
不要让响应式布局针对设备完全不同
如果您不创建灵活的布局，而是为每个布局创建单独的 HTML，那么这是一个特别危险的错误。
是的，移动设计有其自身的特点。有时，甚至网站的功能在不同设备上也有所不同。但这并不意味着习惯于在桌面上使用您的网站的用户应该通过智能手机再次熟悉它。
寻找优秀的开发人员来提供帮助
如果没有 Bootstrap 专家或可以为每个设备创建和连接响应版本的人，什么都行不通。
响应式设计似乎是一个无法克服的怪物：为了不犯错误，需要考虑太多因素。好消息是 100% 的现代网页设计师都面临这些问题，并且每个人都以自己的方式解决这些问题。这是创造性的工作。
如果您对网站作为业务目标而不是设计感兴趣，请研究Completo 的网站开发说明。