过渡、动画、移动端

过渡与动画

1. 1.      都是从一种状态到另外一种状态
2. 2.      过渡需要触发条件,而动画不需要

移动端布局

准备工作:

1. 1.      移动端概念的理解:手机APP的界面
2. 2.      如何查看移动端:f12 检查 找手机
3. 3.      二倍屏/三倍屏 截图出来的px大小【宽度】/css设置一个像素上有两个到三个以上的像素点
4. 4.      让布局视口与实际的视口一样

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

1. 5.      a.  Rem:直接找HTML中设置的字体大小

font-size*rem 等于宽度高度

1. b.   Em 先找自身设置的font-size的大小，如果没有则一直向上找，如果都没有则执行html中设置的font-size的大小

Font-size*em

1. 6.      媒体查询

让rem在不同的设备中显示出来的大小不一样

监测视口宽度的变化，如果视口的宽度大于等于最小900宽度时显示里面的样式 如果小于900时显示的为初始设置的颜色 必须写到下面

@media all and (min-width)and (max-width:){}

 

更换网站小图标
link rel="shortcut" herf="图片地址"

CSS像素：实际开发中设置的像素
dpr=物理像素、CSS像素
1.移动端的概念：手机app界面
2.标签<meta> 让视口的宽度等于布局的css的宽度
3.单位rem 找html中设置的font-size的大小
em先找自身设置的font-size的大小，如果没有则一直向上找，如果都没有则执行html中设置的font-size的大小
5.二倍屏/三倍屏 截图截出来的px大小【宽度】/css设置的
6.让rem在不同设备中显示出来的大小不一样
@media all and (mix-width:) and (max-width:){}