CSS常用属性（四）

最新推荐文章于 2024-02-07 18:44:18 发布

原创

最新推荐文章于 2024-02-07 18:44:18 发布 · 344 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #css #动画

本文介绍了CSS中的单位em和rem，强调它们在响应式网页设计中的重要性。px作为固定单位，不适用于自适应布局，而em和rem作为相对单位，允许根据根元素或父元素字体大小调整元素尺寸。rem尤其适合大规模调整页面字体大小，而文字一般建议使用px以保持清晰。此外，文章探讨了基于rem的移动端适配布局策略，以及如何根据设备的设备像素比(dpr)动态设置html的font-size。

/*
*作者：呆萌老师
*☑csdn认证讲师
*☑51cto高级讲师
*☑腾讯课堂认证讲师
*☑网易云课堂认证讲师
*☑华为开发者学堂认证讲师
*☑爱奇艺千人名师计划成员
*在这里给大家分享技术、知识和生活
*各种干货，记得关注哦！
*vx：it_daimeng
*/

动画

调用自定义动画：

.cls_div{

  width: 100px;

  height: 100px; 

 

  /*执行动画    infinite:重复动画*/

  animation: 5s change2 infinite;

}

自定义动画:

@keyframes change{

  from{

    background-color: pink;

  }

  to{

   

    background-color: blue;  

    margin-left: 100px;

   

  }

}



@keyframes change2{

  0%{

    background-color: pink;

   

    margin-left: 0px;

  }

  50%{

   

    background-color: blue;  

    margin-left: 100px;

   

  }

  100%{

    background-color: pink;

   

    margin-left: 0px;

  }

}

调用动画库:

导入动画库

<link rel="stylesheet" href="css/animate.min.css" />

调用

.cls_div2{

 

  width: 150px;

  height: 30px;

  background-color: pink;

  animation: 3s tada infinite; /*调用动画库中的动画*/

}

查看动画库中有哪些动画名称(动画库网站)

网址:https://daneden.github.io/animate.css/

响应式,多媒体查询

媒体查询：是指根据不同的终端(不同分辨率的设备),选择不同的样式

方式1:在同一个css文件中分辨不同的终端

.zong{

   

    width: 100%;

   

    border: 1px solid red;  

   

    display: flex;

   

    flex-direction: row;

   

    flex-wrap: wrap;

}



/*超小屏幕*/

@media only screen and (max-width: 767px) {

   

    .zong div{

       

        width: 100%;

        background-color: blue;

       

    }

   

}



/*小屏幕*/

@media only screen and (min-width: 768px) and (max-width: 992px) {

   

    .zong div{

       

        width: 50%;

        background-color: green;

       

    }

   

}



/*大屏幕*/

@media only screen and (min-width: 9