学习日记-css3 @supports | @media | @keyframes | rem字体

来源：互联网发布：python获取命令行参数编辑：程序博客网时间：2024/06/05 19:59

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

阅读全文

0 0