CSS中@support的用法 及其calc、media用法
背景: 一次偶然的机会遇到一个朋友在刷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:CSS中一些@规则的用法小结 2: @media用法详解
第一篇文章:@用法小结 第二篇文章:@media用法 第一篇文章:@用法小结 这篇文章主要介绍了CSS中一些@规则的用法小结,是CSS入门学习中的基础知识,需要的朋友可以参考下 at-rule ...
- CSS中@support的用法
这段时间一直在调试浏览器的兼容性问题,了解到了@support的这个属性,记录下: CSS中的@support主要是用于检测浏览器是否支持CSS的某个属性,其实就是条件判断,如果支持某个属性,你可以写 ...
- CSS中的class与id区别及用法
转自http://www.divcss5.com/rumen/r3.shtml及http://www.jb51.net/css/35927.html 我们平常在用DIV CSS制作Xhtml网页页面时 ...
- CSS中box-sizing属性的理解与部分用法
今天看了一些关于box-sizing的一些资料,在这里整理一下,希望也能对大家有所帮助. box-sizing是CSS的一个属性,很好的解决了盒模型的相关问题.CSS中的盒模型(Box model)分 ...
- Css中路径data:image/png;base64的用法详解
今天查看一些网站的css中发现了 background-image:url(data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAAB ...
- DIV+CSS中标签dl dt dd常用的用法
转自:http://smallpig301.blog.163.com/blog/static/9986093201010262499229/ < dl>< /dl>用来创建一个 ...
- Css中路径data:image/png;base64的用法详解 (转载)
大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如: background-image:url(data:image/png;base64, iVBORw0KGg ...
- CSS中路径及form表单的用法
1.什么是路径? 路劲分为三种 1.绝对路径: 从盘符开始,然后依次的往下查找 本地: C:/Users/Administrator/Desktop/0527day01/07.html 服务器的: w ...
- html/css中相对定位relative和绝对定位absolute的用法
一.相对定位(position:relative) 1.相对定位:将盒子的position属性设置为relative:可通过left.top.right.bottom设置偏移量. 相对定位基础用法示例 ...
随机推荐
- Linux shell自动读mongo数据、远程获取文件大小示例脚本
1.示例1 功能:对mongoDB导出数据,根据sid的不同状态进行统计 技术点:shell bash 读写文件.字符串截取.函数.用多个文件提到的map.grep查找并赋值给变量 #!/bin/b ...
- rapoo mt700键盘mac osx不能复制问题
问题描述:rapoo mt700键盘mac osx,按windows建+c不能复制,其它按键正常 解决办法:检查右上角windows等是否亮,如果是亮着按FN+WIN 切换模式 操作方法: 有线模式: ...
- [STL] UVA 10815 安迪的第一个字典 Andy's First Dictionary
1.set 集合 哦....对了,set有自动按照字典序排序功能..... 声明和插入操作 #include <cstdio> #include <vector> #inclu ...
- Redis 设计与实现,看 SDS(Simple Dynamic String) 感悟
Redis 设计与实现,看 SDS(Simple Dynamic String) 感悟 今天在看 Redis 设计与实现这本书的时候,发现了里面系统定义的数据结构 SDS,中文名为 简单动态字符串.对 ...
- 转载一篇文章:LINQ TO SQL 大全
https://www.cnblogs.com/chenwolong/p/lts.html 最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来. 十年河东十年河 ...
- Docker入门学习及其安装
1.Docker是一个开源的应用容器引擎,基于Go语言并遵从Apache2.0协议开源.Docker可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然后发布到任何流行的Linux机器 ...
- Mysql 报错:#1067 - Invalid default value for 'update_time
由于 字段UPDATE_TIME 的字段类型是 timestamp ,默认值是:'0000-00-00 00:00:00' 即:`UPDATE_TIME` timestamp NOT NULL DEF ...
- Spring面试题总结的很全面,附带超详细答案
1.什么是Spring? Spring是一个开源的Java EE开发框架.Spring框架的核心功能可以应用在任何Java应用程序中,但对Java EE平台上的Web应用程序有更好的扩展性.Sprin ...
- centos7安装jdk1.7(rpm版)
一.环境 centos7 jdk-7u80-linux-x64.rpm下载:链接:https://pan.baidu.com/s/10UMrxNE1d2ZbDt7kvBM1yQ 提取码:pmov ...
- Photoshop CC 2020 (PS 2020)改变与新功能
Adobe Photoshop CC 2020中文版新增相机防抖动功能.CameraRAW 功能改进.图像提升采样.属性面板改进.Behance集成等功能,以及同步设置和其他更多有用的功能.ps202 ...