日常忽略的css

标签：动态   ora   alc   not   pre   媒体类型   移动端   screen   media   

1、calc() 函数：用于动态计算长度值。

　　这个函数我没有经常使用，因为我关于宽度的计算，我一般使用百分比，但是这个函数给我一个可以在css也进行计算的功能。calc()函数支持 "+", "-", "*", "/" 运算；很实用。

　　eg:  width: calc( 100% - 100px )

2、@support：用于检测浏览器是否支持CSS的某个属性，其实就是条件判断，如果支持某个属性，你可以写一套样式，如果不支持某个属性，你也可以提供另外一套样式作为替补

　　这个函数我根本就没了解过，失败。这个主要主要在调试浏览器兼容性的时候用处很大

　　eg: 

支持css
@supports (display: grid) {
  div {
    display: grid;
  }
}
不支持css
@supports not (display: grid) {
  div {
    float: right;
  }
}

3、@media： 针对不同的媒体类型定义不同的样式，可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面。

　　这个css我以前做移动端的时候经常使用，但是好长时间不用，竟然给忘记了。不应该。

　　eg：

@media screen and (min-width:960px){
    body{
        background:orange;
    }
}
@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

日常忽略的css

标签：动态   ora   alc   not   pre   媒体类型   移动端   screen   media   

原文地址：https://www.cnblogs.com/liumcb/p/13323899.html