减少运动媒体查询prefers-reduced-motion

简化运动的简史

在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){}

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

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

减少运动媒体查询prefers-reduced-motion相关推荐

媒体查询特性 - 适应用户偏好 | perfers-reduced-motion | prefers-color-scheme | Save data
⭐️ 本文首发自前端修罗场(点击加入),是一个由资深开发者独立运行的专业技术社区,我专注 Web 技术.Web3.区块链.答疑解惑.面试辅导以及职业发展.博主创作的 <前端面试复习笔记& ...
移动web开发之rem布局（rem基础、媒体查询、 less 基础、rem适配方案）
移动web开发之rem布局一.rem基础 rem单位 rem (root em)是一个相对单位,类似于em,em是父元素字体大小. 不同的是rem的基准是相对于html元素的字体大小. 比如,根元素 ...
css 媒体查询移动端,媒体查询（pc端，移动端不同布局）
媒体查询语法: 1.内联写法:and之后必须有空格 @media screen and (min-width:960px //判断浏览器大小条件){ body{background:red} //常规 ...
459~486（rem+媒体查询+Less+苏宁易购移动端首页）
1 rem基础 rem单位 rem(root em)是一个相对单位,类似于em,em是父元素字体大小. 不同的是rem的基准是相对于html元素的字体大小. 比如,根元素(html)设置font-si ...
基于媒体查询和 rem 的响应式布局实践
本文首发于 dawei.lv 媒体查询 @media 我们开发一个网站的时候希望在手机端.iPad 端.PC 端都有良好的体验,CSS 给我们提供了一个强大的条件判断语法,可以根据设备的宽度来设置不同 ...
媒体查询漫谈——@media Queries
通过不同的媒体类型和条件定义样式表规则.媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件.媒体查询的大部分媒体特性都接受min和max用于表达"大于或等于"和&q ...
CSS3-多媒体查询
@media规则在css2中就有介绍,针对不同媒体颗星可以定制不同的样式规则.例如:你可针对不同的媒体类型(包括显示器.便携设备.电视机等等)设置不同的样式规则.但这些多媒体类型在很多设备上支持还不够 ...
iPhone系列设备媒体查询：
这就引出一个问题,我们在对iPhone设备适配时候,又多出几种情况.iPhone系列设备媒体查询: @media only screen and (min-device-width: 320px){/ ...
好程序员web前端技术分享媒体查询
为什么80%的码农都做不了架构师?>>> 好程序员web前端技术分享媒体查询什么是媒体查询媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向 ...

减少运动媒体查询prefers-reduced-motion

减少运动媒体查询prefers-reduced-motion相关推荐

最新文章

热门文章