背景: 一次偶然的机会遇到一个朋友在刷css的库其中有这样一道题(css变量如何定义,calc, support, media),我看一眼熟悉而陌生,知其一而不知其二,叔可忍婶不可忍,马上就度娘起来,看一看它的真面目。

一 support

了解到了@support的这个属性,记录下:
CSS中的@support主要是用于检测浏览器是否支持CSS的某个属性,其实就是条件判断,如果支持某个属性,你可以写一套样式,如果不支持某个属性,你也可以提供另外一套样式作为替补。但是这里有一点需要注意的是:@support对于浏览器的版本也是有要求的,不是说所有的浏览器以及其所有的版本都是支持@support的。
下面就来说一下@support的用法:
1.基本语法是这样的:

@support(prop:value){
/*自己的样式*/
}
@supports (display: flex) { div { display: flex; }}

注释:如果浏览器支持display:flex属性的话,那么div的样式就是display:flex

2.逻辑操作符:“not” 的用法

@supports not (display: flex) { div { float: right; }}

注释:如果浏览器不支持display:flex属性的话,那么div的样式就是display:right

3.逻辑操作符:“and”的用法

@supports (display: flex) and ( box-shadow: 2px 2px 2px black ) {
/*自己的样式*/
}

注释:如果浏览器支持display:flex和box-shadow的属性,就执行里面自己的样式

4.逻辑操作符:“or” 的用法

@supports (display: -webkit-flex) or (display: -moz-flex) or(display: flex) {
/*自己的样式 */
}

注释:如果浏览器支持其中一个就可以执行里面自己的样式

5.混用的例子
“or”和“and”混用,在@supports中“or”和“and”混用时,必须使用括号()来区分其优先级

@supports ((transition-property: color) or (animation-name: foo)) and (transform: rotate(10deg)) {
/*自己的样式 */
}
@supports (transition-property: color) or ((animation-name: foo) and (transform: rotate(10deg))) {
/*自己的样式 */
}

“or”、“and” 和 “not” 混用

@supports (display: grid) and (not (transition-property: color) or (animation-name: foo)){
/*自己的样式 */
}

二 calc

定义与用法

calc() 函数用于动态计算长度值。

● 需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);

● 任何长度值都可以使用calc()函数进行计算;

● calc()函数支持 "+", "-", "*", "/" 运算;

● calc()函数使用标准的数学运算优先级规则;

CSS 语法

calc(expression)
值  描述
expression  必须,一个数学表达式,结果将采用运算后的返回值
width: calc(% - 80px);

注: calc兼容见 https://www.cnblogs.com/gaoht/p/11021876.html

二 media

定义和使用

使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。

当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。

CSS 语法

@media mediatype and|not|only (media feature) {
CSS-Code;
}

实例

使用 @media 查询来制作响应式设计:

@media only screen and (max-width: 500px) {
.gridmenu {
width:%;
} .gridmain {
width:%;
} .gridright {
width:%;
}
}

---------------------
参考文章:

https://blog.csdn.net/liaobangxiang/article/details/80706922

https://developer.mozilla.org/en-US/docs/Web/CSS/calc

https://www.runoob.com/cssref/css3-pr-mediaquery.html

CSS中@support的用法 及其calc、media用法的更多相关文章

  1. 1:CSS中一些@规则的用法小结 2: @media用法详解

    第一篇文章:@用法小结 第二篇文章:@media用法 第一篇文章:@用法小结 这篇文章主要介绍了CSS中一些@规则的用法小结,是CSS入门学习中的基础知识,需要的朋友可以参考下     at-rule ...

  2. CSS中@support的用法

    这段时间一直在调试浏览器的兼容性问题,了解到了@support的这个属性,记录下: CSS中的@support主要是用于检测浏览器是否支持CSS的某个属性,其实就是条件判断,如果支持某个属性,你可以写 ...

  3. CSS中的class与id区别及用法

    转自http://www.divcss5.com/rumen/r3.shtml及http://www.jb51.net/css/35927.html 我们平常在用DIV CSS制作Xhtml网页页面时 ...

  4. CSS中box-sizing属性的理解与部分用法

    今天看了一些关于box-sizing的一些资料,在这里整理一下,希望也能对大家有所帮助. box-sizing是CSS的一个属性,很好的解决了盒模型的相关问题.CSS中的盒模型(Box model)分 ...

  5. Css中路径data:image/png;base64的用法详解

    今天查看一些网站的css中发现了 background-image:url(data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAAB ...

  6. DIV+CSS中标签dl dt dd常用的用法

    转自:http://smallpig301.blog.163.com/blog/static/9986093201010262499229/ < dl>< /dl>用来创建一个 ...

  7. Css中路径data:image/png;base64的用法详解 (转载)

    大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如: background-image:url(data:image/png;base64, iVBORw0KGg ...

  8. CSS中路径及form表单的用法

    1.什么是路径? 路劲分为三种 1.绝对路径: 从盘符开始,然后依次的往下查找 本地: C:/Users/Administrator/Desktop/0527day01/07.html 服务器的: w ...

  9. html/css中相对定位relative和绝对定位absolute的用法

    一.相对定位(position:relative) 1.相对定位:将盒子的position属性设置为relative:可通过left.top.right.bottom设置偏移量. 相对定位基础用法示例 ...

随机推荐

  1. Linux shell自动读mongo数据、远程获取文件大小示例脚本

    1.示例1 功能:对mongoDB导出数据,根据sid的不同状态进行统计 技术点:shell bash  读写文件.字符串截取.函数.用多个文件提到的map.grep查找并赋值给变量 #!/bin/b ...

  2. rapoo mt700键盘mac osx不能复制问题

    问题描述:rapoo mt700键盘mac osx,按windows建+c不能复制,其它按键正常 解决办法:检查右上角windows等是否亮,如果是亮着按FN+WIN 切换模式 操作方法: 有线模式: ...

  3. [STL] UVA 10815 安迪的第一个字典 Andy's First Dictionary

    1.set 集合 哦....对了,set有自动按照字典序排序功能..... 声明和插入操作 #include <cstdio> #include <vector> #inclu ...

  4. Redis 设计与实现,看 SDS(Simple Dynamic String) 感悟

    Redis 设计与实现,看 SDS(Simple Dynamic String) 感悟 今天在看 Redis 设计与实现这本书的时候,发现了里面系统定义的数据结构 SDS,中文名为 简单动态字符串.对 ...

  5. 转载一篇文章:LINQ TO SQL 大全

    https://www.cnblogs.com/chenwolong/p/lts.html 最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来. 十年河东十年河 ...

  6. Docker入门学习及其安装

    1.Docker是一个开源的应用容器引擎,基于Go语言并遵从Apache2.0协议开源.Docker可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然后发布到任何流行的Linux机器 ...

  7. Mysql 报错:#1067 - Invalid default value for 'update_time

    由于 字段UPDATE_TIME 的字段类型是 timestamp ,默认值是:'0000-00-00 00:00:00' 即:`UPDATE_TIME` timestamp NOT NULL DEF ...

  8. Spring面试题总结的很全面,附带超详细答案

    1.什么是Spring? Spring是一个开源的Java EE开发框架.Spring框架的核心功能可以应用在任何Java应用程序中,但对Java EE平台上的Web应用程序有更好的扩展性.Sprin ...

  9. centos7安装jdk1.7(rpm版)

    一.环境 centos7 jdk-7u80-linux-x64.rpm下载:链接:https://pan.baidu.com/s/10UMrxNE1d2ZbDt7kvBM1yQ   提取码:pmov  ...

  10. Photoshop CC 2020 (PS 2020)改变与新功能

    Adobe Photoshop CC 2020中文版新增相机防抖动功能.CameraRAW 功能改进.图像提升采样.属性面板改进.Behance集成等功能,以及同步设置和其他更多有用的功能.ps202 ...