前端技术总结

基础语言

• HTML：定义网页的结构和内容。
• CSS：控制网页的样式与布局。
• JavaScript：实现网页的动态行为和交互。

h5

HTML5 是 HTML 的第五个版本,目前的前端框架都是建立在 HTML5 的基础上运行的。

前端框架/库

• React：由 Facebook 开发的用于构建用户界面的 JavaScript 库。
• Vue.js：渐进式 JavaScript 框架，易于集成和上手。
• Angular：由 Google 维护的全功能前端框架。
• Svelte：编译时生成高效代码的新一代框架

React

• React 是由 Facebook 开发的前端库
• 提供了组件化开发模式、虚拟 DOM、状态管理等功能
• Next.js是一个基于React的服务器端渲染框架，旨在简化React应用的开发流程,提供更好的性能和开发体验。

Vue

• Nuxt.js 是一个基于 Vue.js 的开源框架,旨在简化Vue应用的开发流程。

样式技术

• SCSS/SASS：CSS 预处理器，提供变量、嵌套等功能。
• Less：另一种流行的 CSS 预处理器。
• Tailwind CSS：实用优先的 CSS 框架。
• CSS-in-JS：如 styled-components，在 JS 中编写样式。

pc端与移动端兼容

可以选择支持响应式布局、跨平台兼容性好的框架或技术方案

•  React + 响应式 UI 框架（Tailwind CSS / Bootstrap / Material-UI）
• Vue.js + Element Plus / Vant
• Flutter Web / React Native Web（跨平台统一）;使用一套代码，可运行在 Web、iOS、Android 上
• 纯 HTML/CSS/JS +  CSS3 + Bootstrap 5

 

实现响应式的关键点:

• 使用媒体查询（Media Queries）
• 弹性布局（Flexbox、Grid）
• 视口适配（viewport meta 标签）
• 图片和字体的自适应处理
• 使用 rem/vw 单位代替 px