【发布时间】：2019-03-28 07:04:00
【问题描述】：
我对 Java、Python 和 C 等通用编程语言有丰富的经验。我经常自学，熟悉四人组的设计模式。我最近一直在制作适合移动设备的网站，但纵观我的解决方案，我可以肯定地说我的前端开发技能不是很好，尽管找到了解决方案。我建议我不要实施最佳实践，我想找到一个地方来提高我创建移动响应网站的能力。我阅读了很多 bootstrap4 框架，它对导航栏之类的东西很有帮助，但是某些事情是不可能的。
我解决的一般问题是创建一个带有图像、文本和箭头的全角正方形。
对于桌面。按钮的宽度为 30%，img 位于左侧。 对于移动设备，按钮的宽度为 100%，img 在顶部，下面是文本，最后是按钮等...
为了解决这样的问题我用react完成，大致是这样的
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 的最佳实践，这些 css/html/js 用于创建移动友好型网站。
欢迎评论我之前的代码示例以获取建议
【问题讨论】：
-
您可以在以下链接中阅读有关引导程序的信息 - getbootstrap.com/docs/4.0/getting-started/introduction
-
@Sethuraman 我阅读了很多 bootstrap4 文档，但是在我想要重新排列项目的情况下，例如我上面的情况，它如何提供帮助？
标签： javascript html css reactjs design-patterns