Media Queries Level 4中的几个属性

一般用屏幕大小来判断移动设备,然后为移动端用户更方便的点击页面上的链接或是其他交互类的元素,而设置不同于pc端的样式。但是现在越来越多的小屏设备可以外接键盘和鼠标,对页面元素能比较精确的做点击、输入操作,而一些平板电脑,或者支持触屏的显示器,虽然屏幕较大但是也会有使用手指触摸操作的场景,所以相比使用屏幕尺寸界定设备类型,更好的方式是判断用户使用哪种输入指示设备,以及能不能悬浮在页面元素上(hover)。

pointer和any-pointer

@media (pointer: fine) { }

测试是否有定点设备(比如鼠标)以及设备精度如何

属性值:
none 没有定点指示设备
coarse 定点设备精度有限,例如触屏设备,运动检测传感器(体感游戏用的那种控制器)
fine 定点设备比较精确,例如使用鼠标,触摸板,触屏绘画笔

可以用pointer: coarse取代width判断移动设备

any-pointer和pointer类似,区别是pointer判断主要的定点设备,any-pointer判断的是任意一个

属性值:
none 没有定点设备
coarse 至少有一个定点设备可以达到有限精度
fine 至少有一个定点设备可以达到精确精度

hover和any-hover

@media (hover: hover) { }
@media (any-hover: hover) { }

判断定点设备是否能悬浮在元素上,两个属性的区别和上面两个类似

none 没有定点设备,或者设备不能悬停在元素上
hover 可以悬停在元素上

以上四个 Edge 12开始支持

and,not,or 和 range语法

@media (min-width: 400px) and (max-width: 700px) { }

@media (min-width: 20em), not all and (min-height: 40em) {
    @media not all and (pointer: none) {
        /* … */
    }
}

等同于

@media (400px <= width <= 700px) { }

@media ((width >= 20em) or (height < 40em)) and (pointer) {
    /* … */
}

overflow-block

@media (overflow-block: scroll) {}

判断设备如何处理溢出内容,通常电脑屏幕可以滚动查看溢出内容,有的设备不显示(比如数字广告牌),或者分页显示(打印)

属性值:
none 不显示
scroll 通过滚动显示,例如电脑屏幕
optional-paged 可以滚动显示,可以手动触发分页,比如幻灯片
paged 分页显示,例如电子书

支持性不太好,基本就火狐可以

其他

JavaScript

Window.matchMedia() - Web APIs | MDN

关于媒体查询的最佳实践

此部分参考slides Media Queries Level 4

不使用媒体查询

flexbox,grid,multicol,vh vw, min-width max-width来实现更健壮的网站

断点

不要基于一些特殊设备尺寸设置断点

@media (width: 320px) { /* iPhone 设计 */ }
@media (width: 320px), (width: 375px) { /* iPhone 设计 */ }
@media (width: 320px), (width: 375px), (width: 414px) { /* iPhone 设计 */ }

在设计需要的地方设置断点

@media (width < 20em) { /* 窄屏设计 */ }

使用不同的单位,比如em

@media (width > 640px) { /* 宽屏样式 */ }

推荐:

@media (width > 40em) { /* 宽屏样式 */ }

保持简洁

不好的写法:

@media (pointer: coarse) or (pointer: fine) { }

推荐:

@media (pointer) { }

使用正确的媒体查询

不好的写法:

@media (width: 320px) { 
/* 对iPhone增大点击目标 */ 
}

推荐:

@media (pointer: coarse) { 
/* 增大点击目标 */ 
}

使用渐进式增强

不好的:

/* 完整的设计样式 */
@media (/* 检测受限的设备 */) {
    /* 降级处理 */
}

推荐写法:

/* 基础样式 */
@media (/* 测试支持的设备 */) {
    /* 更多功能 */
}

相关阅读:
Using Media Queries For Responsive Design In 2018 — Smashing Magazine
Dev.Opera — Interaction Media Features and their potential (for incorrect assumptions)
设备测试pointer/hover/any-pointer/any-hover

Comments
Write a Comment