在移动端经常会遇到根据横竖屏以不同的样式来适配或提醒用户切换为竖屏以保持良好的用户体验需求，这里结合JavaScript&CSS检测手机横竖屏一文做一下总结
元素的宽高比描述了其宽度与高度之间的比例关系。两种常见的视频宽高比是4：3（20世纪的通用视频格式）和16：9（高清电视和欧洲数字电视的通用）。
JavaScript检测手机横竖屏，window.orientation:获取屏幕旋转方向。CSS检测手机横竖屏orientation: portrait（竖屏）|landscape（横屏）
CSS3滤镜（filter）与我们经常说的IE滤镜是两码事，IE滤镜是指老版本的(4.0 到9.0)Windows IE浏览器支持一种非标准的 "filter" ，目前已经被现代浏览器弃用。CSS3滤镜（filter）属性提供的图形特效，如灰度、透明度、模糊、阴影等。
background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框下面。如果没有设置背景图片或背景颜色，那么这个属性只有在边框透明或半透明时才能看到视觉效果，否则，本属性产生的样式变化会被边框覆盖。background-position：指定图片的初始位置。这个初始位置是相对于以background-origin定义的背景位置图层来说的。background-size：设置背景图片大小。当取值为百分比时，表示指定背景图片相对背景区的百分比大小。当设置两个参数时，第一个值指定图片的宽度，第二个值指定图片的高度。
CSS @supports通过CSS语法来实现特性检测，判断当前浏览器对某个特性是否支持，实现渐进增强的效果。
写了好几年的css还真没有注意到它们之间的区别，同时这也是一个很好的面试题。例如：问position属性有多少取值。通常的回答是static、relative、absolute和fixed。当然还有一个sticky。其实，除此之外，CSS属性通常还可以设置下面几个值：initial、inherit、unset、revert
