## 一、calc() 可计算属性 [https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc](https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc) ~~~ width: calc(100% - 80px); ~~~ ## 二、@media() [https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries](https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries) ~~~ @media tv and (min-width: 700px) and (orientation: landscape) { ... } ~~~ ## 三、@viewport [https://developer.mozilla.org/zh-CN/docs/Web/CSS/@viewport](https://developer.mozilla.org/zh-CN/docs/Web/CSS/@viewport) ~~~ @viewport { min-width: 640px; max-width: 800px; } ~~~ ## 四、@support() [https://developer.mozilla.org/en-US/docs/Web/CSS/@supports](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports) ~~~ @supports (display: flex) { div { display: flex; } } ~~~ ## 五、constand [解决iphoneX案例](http://www.css88.com/archives/8224) ~~~ .container { padding-top: constant(safe-area-inset-top); padding-right: constant(safe-area-inset-right); padding-bottom: constant(safe-area-inset-bottom); padding-left: constant(safe-area-inset-left); } ~~~