calc，supports，media各自的含义及用法

即将步入大三，看着身边的同学都在准备考研，不想考研的我慌了，需要准备一下大四的就业面试，今天是准备的第一天，我想用博客记录下我的成长

一 calc()

定义：

• 用于动态计算长度值
• calc()支持"+"，"-"，"*"，"/"四则运算
• 注意运算符前后要留有空格

应用场景

有时你没法准确的（或难度很大）算出一个宽度的大小，这个计算属性就很有用了

div{
	width: calc(100% - 2px);
}

二 @supports

定义：

• 判断该浏览器是否支持该属性，如果支持就使用后面的一套渲染方式，否则使用另外一套渲染方式
• 可以与not，and，or搭配使用

应用场景

IE10+支持flex布局，IE10一下的版本对flex布局有兼容性问题

@supports (display:flex){
	div{
		display: flex;
	}
}
@supports not (display: flex){
	div{
		float: right;
	}
}
@support (display: flex) and (box-shadow: 2px 2px 2px black){
	自己的样式
}

@support (display: flex) or (box-shadow: 2px 2px 2px black){
	自己的样式
}

三 @media

定义：

根据不同的媒体类型定义不同的样式

• 针对不同的屏幕尺寸，设置不同的样式，如果你要设计相应式的页面，media就很有用
• 当你重置浏览器大小的时候，页面也会根据浏览器打高度和宽度重新渲染页面

应用场景

如果你设计的是pc端的自适应页面，当你用户将页面无限缩小（放大），页面会变得非常的扭曲，所以你需要使用@media设置自适应限度

@media screen and (max-width:1024px){
	html{
		font-size: 42px !important;
	}
}
@media screen and (min-width: 1920px){
	html{
		font-size: 80px !important;
	}
}

本文地址：https://blog.csdn.net/weixin_44206561/article/details/107890212