通过 CSS 在不同宽度下实现不同的样式

背景故事

本站目前用的是 WordPress 官方提供的 2021 主题。响应式布局、干净简练、性能优越。但是这个主题在手机和平板上的显示效果让我不够满意。Wordpress 是支持为主题添加自定义 CSS 的,我尝试过使用 em (父元素的相对像素)和 rem(根元素的相对像素)来代替 px(CSS 像素),但是复杂的关系和不能区分定义还是让我放弃了这个方案。

后来在网上搜索,我才知道 CSS 本身还有判断语句可以使用(非科班出身的后果😂),后来我在浏览器的开发模式下,用判断语句为网站优化了不同宽度下的显示效果。