全文共字,预计学习时长15分钟
图源:unsplash前端开发员是一个要具备多项技能的工作,它涉及到很多工作,需要多种能力。在工作时,我们必须把注意力集中在正在开发的主要目标上:开发一个帮助人们简化日常工作的网站。
本文中,笔者将列出每个前端开发人员都需要考虑的各个方面,并将针对这些方面以及如何在其中获得成功提供一些线索和案例。
用户界面
布局
创建网站应用程序首先要建立一个吸引人的精确布局,以吸引用户长时间浏览网站。
CSS框架有很多,最著名的是Bootstrap,由于CSS预处理器的新功能,你可以轻松对其定制。他们推荐了很多组件和控件,这些组件和控件为网站提供统一的外观。迄今为止,Bootstrap已经发布了第五版的前端。
如果你更喜欢创建CSS框架(即组件外观,间距,容器等等),那么flexbox是管理灵活内容块的不二之选。CSS网格使用另一种方法,将内容块划分为网格。
响应性
响应性是网站根据读者的设备调整其内容的处理能力,例如,你不会在智能手机和桌面上以同样的方式看到这篇文章。网络应用程序的响应性有助于精确地显示内容,并提高可读性和用户体验。
就像MDNwebdocs所说:“当你希望根据设备的一般类型(如打印和屏幕)或特定特性和参数(屏幕分辨率或浏览器视口宽度)修改站点或应用程序时,媒体查询很有用。”
CSS媒体查询是处理响应的有力方法,你可以使用它们与Flexbox或CSSGrid配对。如果更喜欢使用CSS框架,那么响应通常已经被管理,只需要添加特定的CSS类即可。
使用srcset也是一个使图像响应的很好的选择。它允许根据设备尺寸以不同的初始大小呈现相同的图像,保持了屏幕高宽比并减轻了包装的重量。
同类成分和控制件
图源:unsplash拥有同类成分和控制件会给用户舒适的视觉感受。它就像一个指导方针,指引着用户,代表着公司的身份。
若想用现有的框架,有这些著名的JS框架库:
·React—web组件的材料设计的实现: