欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-22 09:45:45
即将步入大三,看着身边的同学都在准备考研,不想考研的我慌了,需要准备一下大四的就业面试,今天是准备的第一天,我想用博客记录下我的成长一 calc()定义:用于动态计算长度值calc()支持"+","-","*","/"四则运算注意运算符前后要留有空格应用场景有时你没法准确的(或难度很大)算出一个宽度的大小,这个计算属性就很有用了div{width: calc(100% - 2px);}二 @supports定义:判断该浏览器是否支持该属性,如果支持就使用后面的一套渲染方式...

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

一 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

相关标签: css