HTML Elements
调试 bug: 加上样式后 刷新页面 样式不符合预期时 可以进入开发者模式 查看真正被应用的元素样式 因为可能是缓存问题
CSS 内容, 并列的element放一块, 而不是分类放, 这样修改比较容易找位置看对比, 比如下面的内容, 最好是把 course-details
和 course-title-description
的 css 放一块, 这样我们想修改二者的css做对比的时候才比较好找他们对应的css, 而不是每次都得往下翻很久…
<article className="course-card">
<div className="course-title-description">
...
</div>
<div className="course-details">
<div className="course-meta">
...
</div>
<div className="course-stats">
...
</div>
</div>
</article>
html {
font-size: 10px; /* 将根元素字体大小设为 10px */
}
.example2 {
font-size: 1.6rem; /* 现在等于 16px */
margin: 2rem; /* 现在等于 20px */
}
rem 是 “root em” 的缩写, 基于根元素的字体大小来计算, em 是相对于父元素的字体大小计算的
vw/vh
是相对于视口(viewport)的单位, %
是相对于父元素的单位,
dvh
会随着浏览器界面的变化动态调整, 当用户滚动页面时, 如果地址栏收起或展开(Safari经常这样), 使用 dvh 的元素高度会相应变化, 这可能会导致:导航栏高度不稳定, 页面内容跳动, 用户体验不连贯
svh
使用视口的最小可能高度,也就是当移动浏览器的工具栏/地址栏完全展开时的高度, 使用 svh
的优势在于, 导航栏高度始终基于最小视口高度计算, 即使地址栏收起,导航栏的高度也不会改变
lvh
使用视口的最大可能高度, 即当浏览器的工具栏/地址栏完全隐藏时的高度, 全屏背景图片或视频, 沉浸式体验的页面可以尝试,
过度使用 vw/vh 可能导致频繁的重排, 影响性能
查看其他文章