我要评论即将步入大三，看着身边的同学都在准备考研，不想考研的我慌了，需要准备一下大四的就业面试，今天是准备的第一天，我想用博客记录下我的成长
一 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
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论