响应式网站侧边栏FontAwesome图标小屏界面不显示问题求助

问题原因 #

1. viewport元标签拼写错误，导致移动端响应式规则加载异常
2. Font Awesome图标库引入不完整，你仅引入了核心基础样式，未引入图标对应的风格样式文件，所以fa-bars、fa-times等图标无法正常渲染
3. 小屏侧边栏默认显示逻辑不符合交互预期，缺少开关控制逻辑

修复方案 #

1. 修正viewport元标签 #

将index.html的head中对应的代码替换为：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. 替换Font Awesome引入地址 #

将原Font Awesome引入代码替换为全量样式引入：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/all.min.css">

3. 新增侧边栏开关交互逻辑 #

在index.html的</body>标签前添加以下JS代码，实现点击汉堡图标打开侧边栏、点击关闭按钮隐藏侧边栏的功能：

<script>
const navLinks = document.querySelector('.nav-links')
const menuBtn = document.querySelector('.fa-bars')
const closeBtn = document.querySelector('.fa-times')

// 移动端默认隐藏侧边栏
navLinks.style.right = '-200px'
navLinks.style.transition = 'all 0.3s ease'

menuBtn.addEventListener('click', () => {
  navLinks.style.right = '0'
})

closeBtn.addEventListener('click', () => {
  navLinks.style.right = '-200px'
})
</script>

修复完成后，小屏状态下就可以正常显示汉堡、关闭图标，且侧边栏可以正常开关。

内容的提问来源于stack exchange，提问作者Hiba Youssef