html媒体查询,媒体查询写法

简化运动的简史

在2013年iOS 7对操作系统的视觉效果进行了重新设计，更改包括半透明和模糊，更简化的“平面”用户界面，以及诸如全屏缩放和平移等戏剧性动作效果。

虽然新的外观在很大程度上被接受，但是一些使用新的操作系统的人报告说新系统容易使人患有晕动病和眩晕。用户界面移动与用户的移动感或空间方向不一致，从而触发这样的效果。对患有前庭功能障碍的人影响会更大。

尽管技术在此之前无意中造成了不利影响，但iOS的普及使这个问题突显出来，因此Apple在操作系统首选项中添加了禁用前庭疾病患者运动效果的选项。

那我们能做点什么改变这一现状呢？

加入新的媒体查询

Safari 10.1 引入了Reduced Motion Media Query。它是一个非供应商前缀的声明，允许开发人员“为系统首选项中指定优先减少运动的用户创建避免运动的样式”。
CSS语法：

/* Applies styles when Reduced Motion is enabled */ @media screen and (prefers-reduced-motion:reduce){} or @media screen and (prefers-reduced-motion){}

当用户启用Reduced Motion选项时，便会用该媒体查询样式替代用户的体验。
反过来当用户没有启用Reduced Motion偏好设置的时候，你可以用下面的写法：

/* Applies styles when the user has made no preference known */@media screen and (prefers-reduced-motion: no-preference){}

减少运动媒体查询可以提供替代动画的体验，把动画的最终帧样式展示给用户。
作为新用户查询浪潮的一部分，其他浏览器会很快支持减少运动查询功能。

减少运动媒体查询文章来源地址