园龄：6年3个月粉丝：4 关注：1

Css3 @supports | @media | @keyframes | rem字体

**“@media”**规则，主要用来“根据媒体属性区分样式表”(特别是在Responsive设计中，发挥的作用更是强大)；
“@supports”，主要用来代替前面常用的Modernizr库，在不支持CSS3的浏览器下实现渐进增强式设计。

 /*@media 语法*/
@media (min-width: 992px) {
  .modal-lg {
    max-width: 800px;
  }
}
 
/*supports 语法*/
@supports <条件规则> {
  /* 特殊样式规则 */
}
/*区别在于 supports ，在不支持CSS3的浏览器的时候,用来代替前面常用的Modernizr库*/

@keyframes 创建动画

 <!DOCTYPE html>
<html>
<head>
<style> 
div
	{
		width:100px;
		height:100px;
		background:red;
		position:relative;
		animation:mymove 5s infinite;
		-moz-animation:mymove 5s infinite; /* Firefox */
		-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
		-o-animation:mymove 5s infinite; /* Opera */
	}
 
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
</style>
</head>
<body>
	<div> 动画方框 </div>
</body>
</html>

rem是相对于根元素 html, 进行大小辨析的

 html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}
//如果没有设置，将是以“16px”为基准

上一篇服务器：同域名搭建多个项目

下一篇文字省略出现 box-orient

本文作者：轻风细雨_林木木

本文链接：https://www.cnblogs.com/linzhifen5/p/16961460.html

posted @ 2022-12-06 22:22 轻风细雨_林木木阅读(25) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

轻风细雨_林木木

做最优秀的自己。

Css3 @supports | @media | @keyframes | rem字体

公告

常用链接

最新随笔

我的标签

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	/@media 语法/
	@media (min-width: 992px) {
	.modal-lg {
	max-width: 800px;
	}
	}

	/supports 语法/
	@supports <条件规则> {
	/* 特殊样式规则 */
	}
	/区别在于 supports ，在不支持CSS3的浏览器的时候,用来代替前面常用的Modernizr库/

	<!DOCTYPE html>
	<html>
	<head>
	<style>
	div
	{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation:mymove 5s infinite;
	-moz-animation:mymove 5s infinite; /* Firefox */
	-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
	-o-animation:mymove 5s infinite; /* Opera */
	}

	@keyframes mymove
	{
	from {top:0px;}
	to {top:200px;}
	}
	</style>
	</head>
	<body>
	<div> 动画方框 </div>
	</body>
	</html>

	html {font-size: 62.5%;/10 ÷ 16 × 100% = 62.5%/}
	body {font-size: 1.4rem;/1.4 × 10px = 14px /}
	h1 { font-size: 2.4rem;/2.4 × 10px = 24px/}
	//如果没有设置，将是以“16px”为基准