日常忽略的css
2021-01-20 09:13
标签：动态 ora alc not pre 媒体类型 移动端 screen media 1、calc() 函数：用于动态计算长度值。 这个函数我没有经常使用，因为我关于宽度的计算，我一般使用百分比，但是这个函数给我一个可以在css也进行计算的功能。calc()函数支持 "+", "-", "*", "/" 运算；很实用。 eg: width: calc( 100% - 100px ) 2、@support：用于检测浏览器是否支持CSS的某个属性，其实就是条件判断，如果支持某个属性，你可以写一套样式，如果不支持某个属性，你也可以提供另外一套样式作为替补 这个函数我根本就没了解过，失败。这个主要主要在调试浏览器兼容性的时候用处很大 eg: 3、@media： 针对不同的媒体类型定义不同的样式，可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面。 这个css我以前做移动端的时候经常使用，但是好长时间不用，竟然给忘记了。不应该。 eg： 日常忽略的css 标签：动态 ora alc not pre 媒体类型 移动端 screen media 原文地址：https://www.cnblogs.com/liumcb/p/13323899.html支持css
@supports (display: grid) {
div {
display: grid;
}
}
不支持css
@supports not (display: grid) {
div {
float: right;
}
}
@media screen and (min-width:960px){
body{
background:orange;
}
}
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
上一篇：netty 服务端客户端-实例