css笔记--16

1.手机像素

1）在不同的屏幕，单位像素的大小是不同的，像素越小屏幕会越清晰

24寸：1920x1080

i6 4.7寸 750x1334

2）智能手机的像素点，远远小于计算机的像素点

3）默认情况下，移动端的网页都会将视口设置为980像素（css像素）

4）以确保pc端网页可以在移动端正常访问，但是如果网页超过了980，移动端的浏览器会自动对网页缩放以显示完整网页

5）所以基本大部分的pc端网站都可以在移动端正常浏览，但是往往都不会有一个好的体验，伪类解决这个问题，大部分网站都会专门为移动端设计网页

2.完美视口

1）移动端默认的视口大小是980px（css像素）

2）默认情况下，移动端的像素比就是 980/移动端宽度（980/750）

如果直接在网页中编写移动端代码，这样在980的视口下，像素比非常不好，导致网页中的内容非常非常的小

3）编写移动端页面时，必须确保有一个合理的像素比

1css像素对应2个物理像素

1css像素对应3个物理像素

可以通过meta标签来设置视口大小

4）每一款移动设备设计时，都会有一个最佳像素比

一般只需要将像素比设置为该值既可以得到一个最佳效果

将像素比设置为最佳像素比的完美视口大小称之为完美视口

<meta name="viewpoint" content="width=375px";>

5)设置视口大小 device-width表示设备的宽度（完美视口）-->

<meta name="viewport" content="width=device-width, initial-scale=1.0">

结论：以后再写移动端的页面，就先把这个写上

3.vw单位

1）不同设备的完美视口的大小是不一样的，由于不同设备的视口和像素比不同，所以同样的375个像素在不同设备下意义是不一样的

所以在移动端开发时，就不能再使用px来布局了

2）vw表示的是视口的宽度

100vw=一个视口的宽度

1vw=1%视口宽度

vw这个单位永远相当于视口宽度进行计算

4.vw适配

1）rem

1rem=1html的字体大小

2）网页中字体大小最小是12px，不能设置一个比12像素还小的字体，如果我们设置了一个小于12px的字体，则字体自动设置为12px

5.动画

1）动画和过渡类似，都是可以实现一些动态的效果，不同的是过渡需要在某个属性发生变化时才会触发，动画可以自动触发动态效果

2）设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行的每一个步骤

3）from表示动画的开始位置，也可以使用百分比

4)to表示动画的结束位置

5）设置动画

animation-name：要对当前元素生效的关键帧的名字

animation-duration：动画的执行时间

animation-delay：动画的延时

animation-iteration-count：动画执行的次数

1）可选值：

2）次数

3）infinite：无限执行

animation-direction：指定动画运行的方向

1）可选值：

2）normal：默认值，从from到to运行，每次都是这样

3）reverse：从to到from运行，每次都是这样

4）alternate：从from到to运行，重复执行动画时反向执行

5）alternate-reverse：从to到from运行，重复执行动画时反向执行

animation-play-state：设置动画的执行状态

1）可选值：

2）running：默认值，动画执行

3）paused：动画暂停

animation-fill-mode：动画的填充模式

1）可选值

2）none：默认值，动画执行完毕，元素回到原来位置

3）forwards：动画执行完毕，元素会停止在动画结束的位置

4）backwards：动画延时等待时，元素就会处于开始位置

5）both：结合了forwards和backwards

6.less的语法

1）less中的单行注释，注释中的内容不会被解析到css中；而css中的注释，内容会被解析到css文件中

2）变量，在变量中可以存储一个任意的值，并且我们可以在需要时，任意修改变量中的值

变量的语法：@变量名

3）使用变量时，如果是直接使用，则以@变量名的形式使用即可

4）作为类名，或者一部份值使用时，必须以@{变量名}的形式使用

5）变量发生重叠时，会优先使用比较近的变量

6）可以在变量声明前就使用变量

less中代码

 

.box1{
    background-color: aquamarine;
    .box2{
        background-color: black;
        .box4{
            background-color: azure;
        }
    }
    
    .box3{
        background-color: red;
    }
}
@a:200px;
@c:box6;
.box5{
    width:@a;
}
.@{c}{
    width:@a;
}

css中代码

.box1 {
  background-color: aquamarine;
}
.box1 .box2 {
  background-color: black;
}
.box1 .box2 .box4 {
  background-color: azure;
}
.box1 .box3 {
  background-color: red;
}
.box5 {
  width: 200px;
}
.box6 {
  width: 200px;
}