一、今日知识点
1 移动端的基础
浏览器现状
PC常见浏览器：QQ、UC、edge、谷歌、火狐、苹果浏览器等等。
移动端常见浏览器：QQ浏览器、UC浏览器、百度手机浏览器、夸克浏览器、搜狗浏览器等等
国内的浏览器的内核都是基于webkit内核修改过来的，所以如果有需要处理的兼容性问题，就主要处理webkit内核的兼容性即可。
手机屏幕现状
安卓手机的主要的分辨率：
480×800、480×854、720×1280、1080×1920、2700x1220像素等等。
苹果手机的主要分辨率
640×960、640×1136、750×1334、1242×2208、2556 x 1179等等。
作为开发来说，我们不需要太多的关注分辨率的问题，因为正常去开发网页的时候都是用px尺寸单位。
移动端的调试方法
1、使用谷歌开发者工具 Chrome DevTools的模拟手机调试
2、搭建本地服务器，手机和服务器在一个局域网内
3、使用外网服务器，直接用IP来进行访问
2 移动端的视口问题
视口（viewport）
就是浏览器显示页面内容的屏幕区域，视口可以分为布局视口、视觉视口和理想视口。
布局视口
一般移动设备的浏览器都默认设置了一个布局视口，用于解决早起PC端页面在手机上的显示问题，IOS 和 Android都是980px，所以PC端的页面在手机上显示元素看起来都比较小，一般情况下可以通过手动来缩放网页。
视觉视口
指的是用户正在看到的网站的区域，注意：是正在看到的网站区域，不一定是网站的全部区域，我们是可以通过缩放来控制视觉视口的，但是不会影响布局视口，布局视口仍然是原来的尺寸。
理想视口
为了使网站在移动端有最理想的浏览和阅读宽度而设定的视口，需要手动添加meta标签来控制视口的设置
meta视口标签的主要目的：布局视口和视觉视口的宽度保持一致，简单来说就是设备有多宽，移动端页面的布局页面就有多宽。
meta视口标签的使用
常用属性
width
宽度设置的是viewport宽度，可以设置成device-width的特殊值
initial-scale
初始的缩放比例 设置为大于0的数字，一般是1
maximum-scale
最大的缩放比例，设置为大于0的数字，一般是1
minimum-scale
最小的缩放比例，设置为大于0的数字，一般是1
user-scalable
是否允许用户缩放，yes/1 或者 no/0
标准的视口标签
物理像素和物理像素比
物理像素点指的是屏幕显示的最小颗粒，是真实存在的，在设备出厂的时候就设置好的，比如iphone14 pro 的是2556 x 1179
实际开发过程中一个px单位不一定是等于一个物理像素点的
因为有物理像素比的存在，将一张100px×100px的图片放到手机里会按照物理像素比进行放大。
如果出现了图片模糊的情况，我们一般会按照如下方式解决
如果要将一个100×100的图片放到移动端，假设物理像素比是2
就可以将这个图片先缩小为50px×50px的图片，然后再进行插入即可。
多倍图
当物理像素比是2的时候，那么可以将图片进行缩小2倍，然后进行使用的方式来让图片更加清晰
如果物理像素比3的时候，那么可以将图片缩小3倍，然后进行使用
所以倍图的使用是根据物理像素比的变化而变化的。
3 移动端开发的选择及技术解决方案
移动端的主流方案
1、单独制作移动端
通常情况下，单独制作移动端的页面域名前会加一个m（moblie）
比如https://m.jd.com/
服务器会根据浏览器的类型来返回相应的页面，PC端会返回PC端页面，移动端会返回移动端页面
2、响应式网站
就是PC端和移动端共用一套页面，只不顾在不同的屏幕下会有不同的样式展示。
华为官网就是响应式布局https://www.huawei.com/cn/
移动端的技术解决方案
1、移动端的兼容性问题
移动端的浏览器基本都是以webkit内核为主，所以遇到兼容性问题主要解决webkit的问题即可
我们在移动端部分可以放心的使用HTML5和CSS3的样式，不用担心兼容性问题。
2、移动端的公共样式文件
移动端的CSS初始化推荐使用normalize.css
优点
设置一些有价值的默认值
帮助我们修复了一些浏览器的常见bug
拥有详细的文档
网站地址http://necolas.github.io/normalize.css/
4 移动端常见布局方案
1、单独来制作移动端（主流）
流式布局
flex弹性布局
less+rem+媒体查询
混合布局
2、响应式布局（次要）
媒体查询
Bootstrap
5 CSS的动画
动画序列
1、从0%开始到100%结束，这样的规则我们叫做动画序列
2、在@keyframes 中规定动画的CSS样式，可以创建任意多的样式 （@keyframes 是关键帧的意思）
3、可以使用0~100% 也可以使用from和to来规定动画的开始和结束
动画制作的步骤
1、定义动画
2、调用动画
定义多个阶段的动画
动画常用属性
@keyframes 定义动画
animation 复合属性，所有的动画属性都可以写在该属性中 除了 animation-play-state属性
animation-name 规定动画的名称
animation-duration 规定动画的持续时间
animation-timing-function 规定动画的运动曲线 默认是ease
animation-delay 规定动画何时开始
animation-iteration-count 规定动画的播放次数，默认是1 如果无限循环使用infinite
animation-direction 规定动画在下一周期是否逆向播放 默认是normal 如果要逆向播放，使用alternate
animation-play-state 规定动画是否正在运行，运行时running，暂停是paused
animation-fill-mode 规定动画结束后的状态，保持结束后的状态是forwards 如果是 回到初始状态使用backwards
|
