/* *作者：呆萌老师 *☑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: 993px) and (max-width: 1200px) {
.zong div{
width: 33%;
background-color: pink;
}
}
/*超大屏幕*/
@media only screen and (min-width: 1201px) {
.zong div{
width: 25%;
background-color: orange;
}
}
方式2:创建不同的css文件,根据不同的分辨率调用不同的css文件
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" media="screen and (max-width:767px)" href="css/iphone.css" />
<link rel="stylesheet" media="screen and (min-width:768px) and (max-width:992px)" href="css/ipad.css" />
<link rel="stylesheet" media="screen and (min-width:993px) and (max-width:1200px)" href="css/pc.css" />
<link rel="stylesheet" media="screen and (min-width:1201px) " href="css/big_pc.css" />
单位:px em rem的区别
在我们平常的网页布局过程中经常使用绝对单位像素(px)来进行布局，这样的布局不适合我们自适应网页的实现，所以我们现在来介绍两种常见的绝对单位em和rem。rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。
px
em
）是指相对于父元素的字体大小的单位
代码
<div class="one">
<span>第一层</span>
<div class="two">
<span>第二层</span>
<div class="three">
<span>第三层</span>
</div>
</div>
</div>
font-size: 20px; } .one{ font-size: 1.5em; } .two{ font-size: 0.5em; } .three{ font-size: 2em; }
结果:
.one ---> 30px 1.5 * 20 = 30px .two ---> 15px 0.5 * 30 = 15px .three ---> 30px 2 * 15 = 30px
rem
<div class="one">
<span>第一层</span>
<div class="two">
<span>第二层</span>
<div class="three">
<span>第三层</span>
</div>
</div>
</div>
font-size: 20px; } .one{ font-size: 1.5rem; } .two{ font-size: 0.5rem; } .three{ font-size: 2rem; }
结果： .one ---> 30px 1.5 * 20 = 30px .two ---> 10px 0.5 * 20 = 10px .three ---> 40px 2 * 20 = 40px
文字为什么都用px:
考虑到字体的点阵信息，一般文字尺寸多会采用 16px 20px 24px等值，若以rem指定文字尺寸，会产生诸如21px，19px这样的值，会导致字形难看，毛刺，甚至黑块，故大部分文字应该以px设置。
一般标题类文字，可能也有要求随屏幕缩放，且考虑到这类文字一般都比较大，超过30px的话，也可以用rem设置字体。
多屏适配布局问题
移动端布局，为了适配各种大屏手机，目前最好用的方案莫过于使用相对单位基于rem的原理，我们要做的就是: 针对不同手机这里我们提取了一个公式(rem表示基准值)
说明：
1.乘以dpr，是因为页面有可能为了实现2.除以10，是为了取整，方便计算(理论上可以是任何值)
所以就像下面这样，html的font-size可能会：
iphone3gs: 320px / 10 = 32px
iphone4/5: 320px * 2 / 10 = 64px
iphone6: 375px * 2 / 10 = 75px