设计适合移动设备访问的网站有哪些最佳做法？

Question

我对Java，Python和C等通用编程语言有丰富的经验。我经常自学，并且熟悉“四人帮”中的设计模式。我最近一直在制作适合移动设备访问的网站，但是概述我的解决方案后，尽管可以找到 solution ，但我可以肯定地说我的前端开发技能不是很好。我建议我不要实施最佳做法，我想找到一个地方，在此我可以提高创建移动响应网站的能力。我阅读了很多bootstrap4框架，它对诸如navbars之类的东西有帮助，但是某些事情是不可能的。

例如，此图片中可以描述我网站的最新移动响应组件

我解决的一般问题是创建一个带有图像，文本和箭头的全角正方形。

对于台式机。该按钮的宽度为30％，并且img在左侧。 对于手机，按钮的宽度为100％，img在顶部，下面是文本，最后是按钮等...

为了解决这种问题，我使用react和complete大致是这样

let result;

if (desktop){
     result = /* 40 lines of html to create the solution for desktop */ 
} elif (mobile) {
     result = /* Same 40 lines of html, button width change, html reordering 
     to move the image on top */
} else {
     result = ...
}

{result}

正如您所知，对于每个发送回用户的案例，我基本上将代码增加了三倍。到目前为止，我对移动响应网站的唯一理解是使用@media查询添加了一系列CSS附加条件。

我在通用编程语言方面具有行业经验，但是到目前为止，我的大部分前端开发都是自学成才的。

我想找到任何信息，这些信息可以教您如何创建可用于创建移动友好网站的高效，易读，写得很好的css / html / js最佳实践。

请随时在我之前的代码示例中提出建议

Answer 1

我对网站开发的知识不多，但是一些UI呈现问题的解决方案是：

视口元标记的使用： 视口随设备而异，并且在移动电话上会比在计算机屏幕上小。 视口meta标签告诉浏览器将页面的宽度调整为访问者所来自的设备类型的屏幕。

您应该在所有网页中包含以下视口元素：

Answer 2

建议＃1：针对不同媒体类型的不同样式表
如果您不是CSS中媒体查询的朋友，则可以为不同的媒体类型创建不同的样式表。

<link rel="stylesheet" media="only screen and (max-width: 400px)" href="mobile.css" />
<link rel="stylesheet" media="only screen and (min-width: 401px)" href="desktop.css" />

建议2：使用javascript设置类
还是不是CSS媒体查询的朋友？您还可以根据视口或用户代理将类似“移动”的类分配给html或body标签。 在侦听事件时，可以动态更改该类。 但是您也会遇到媒体查询使用问题...

我不是这个解决方案的朋友，它与媒体查询差不多！

建议＃3：使用预处理器
即使您不是媒体查询的朋友，也请尝试一下！ 我个人讨厌媒体查询，因为处理感觉很奇怪。但是使用像LESS或SCSS这样的预处理器可以解决css遇到的许多问题。 您仍然必须使用条件媒体查询，但是冗余较少，并且它们更易于维护。

建议4：Web服务器配置
您可以将Web服务器配置为根据用户代理为不同的网站提供服务。但是部署新版本可能会更加困难...

结论
我建议使用建议3。
对我来说，这是分配媒体查询的最直观的方式，我认为它最适合您的用例。
它还可以改善您的样式表。

无论您遇到什么问题，我都建议您使用预处理器。 即使您选择了Bootstrap之类的框架。它们中的大多数为一个或多个预处理器提供了一个api，以实现更好的集成。