学习日记-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 创建动画


<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”为基准

你可能感兴趣的:(前端)