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

背景故事

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

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

实际操作

下面这个代码中的 (max-width: 480px) 是指在设备宽度不大于 480px 时满足条件,并执行后续代码。

@media only screen and (max-width: 480px) {
      .entry-content {
          font-size: large;
     }
 }

类推的话,如果使用 (min-width: 480px) 就是指在设备宽度不小于 480px 时满足条件。

除了上面提到的最大最小的宽度或高度,还可使用其他判断条件。

用来判断设备长宽比的 device-aspect-ratio。在下面的代码中,就需要设备长宽比恰好为 4/3 时才能执行。

@media only screen and (device-aspect-ratio:4/3)

用来判断设备物理像素和设备独立像素比例的 -webkit-min-device-pixel-ratio。在下面的代码中,就需要像素比例恰好为 2 时才能执行。

@media only screen and (-webkit-min-device-pixel-ratio:2)

设备的像素比可以在 screensiz.es 查询

多个条件可以通过 andnot 连接来进行「与」或「非」判断。

下面这个代码就需要同时满足「宽度不超过640px」和「高度不超过960px」并在「物理像素和设备独立像素比例为1」不成立的情况下才能执行。

@media only screen and (max-width: 640px) and (max-height: 960px) not (-webkit-min-device-pixel-ratio:1) {
      .entry-content {
          font-size: large;
     }
 }

必须注意 CSS 的优先级是越靠下的权重越高。有可能出现上面样式被下面的覆盖的情况。

本文参考了《响应式布局设置–@media only screen and (转载)》