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
上一篇: 实现vuepc端自适应方案
下一篇: JS构造函数和原型的关系