HTML/CSS[30天] CSS Media query几种非常用媒介查询

0

[30天] CSS Media query几种非常用媒介查询

阅读:264 时间:2022年06月15日

乍一想,好像媒介查询很简单,已经一直在用的东西,还有什么好学的。看了大佬的文章才知道。还有这么多好玩的东西可以学可以用! 我以为我所熟知的: @media (max-width: 640px) { /* css here */} 就这? 大佬教我的: 一...

乍一想,好像媒介查询很简单,已经一直在用的东西,还有什么好学的。看了大佬的文章才知道。还有这么多好玩的东西可以学可以用!

我以为我所熟知的:

@media (max-width: 640px) {    /* css here */}

就这?

大佬教我的:

一、媒介查询的更多打开方式

媒介查询不只是能用在CSS代码块中,还可以用在引入CSS的链接中,甚至是JavaScript中。

例如:

<link rel="stylesheet" href="default.css">
<link rel="stylesheet" href="mobile.css" media="(max-width: 480px)">

再例如:

<picture>
  <source srcset="rect.png" media="(min-width: 480px)">
  <img src="square.png">
</picture>

在JavaScript中,提供了matchMedia方法

if (matchMedia('(max-width: 480px)').matches) {
  // js here
}

注意参数中的引号与括号方式

二、关于交互操作的媒介查询

设备是否⽀持悬停效果

@media (any-hover: hover) {
  /* ⽀持悬停 */
}
@media (any-hover: none) {
  /* 不⽀持悬停 */
}

设备是否可以精确点击

@media (any-pointer: none) {
  /* 不⽀持点击 */
}
@media (any-pointer: coarse) {
  /* ⾄少⼀个装置点击不精准 */
}
@media (any-pointer: fine) {
  /* 有装置点击很精准 */
}

三、设备的暗黑/深色模式查询

目前移动端很热门很流行的东西

/* 深⾊模式 */
@media (prefers-color-scheme: dark) {}
/* 浅⾊模式 */
@media (prefers-color-scheme: light) {}

四、⾼对⽐度模式

基本上所有的操作系统中都会有这样一个设置,主要是方便弱视,散光等群体,以及在强光场景下方便看清内容

@media (prefers-contrast: more) {
  /* ⽤户喜欢⾼对⽐度 */
}
@media (prefers-contrast: less) {
  /* ⽤户喜欢对⽐度 */
}

 

本文主要学习自:https://www.zhangxinxu.com/wordpress/2021/12/css-meida-user-experience/

发表评论说说你的看法吧

精品模板蓝瞳原创精品网站模板

^