菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 裴虎伟-前端(11)_20221123 [打印本页]

作者: faith 时间: 2022-11-23 19:42
标题: 裴虎伟-前端(11)_20221123
一、今日所学内容H3

1、CSS3的2D转换
属性：transform
（1）属性值：translate 位移
translate（x,y）对盒子进行X轴和Y轴的位移
translateX（n）对盒子进行X轴位移
translateY（n）对盒子进行Y轴位移

（2）特点
translate不会影响其他元素的位置
translate中的百分比单位指的是相对于元素自身的宽度和高度的百分比来确定的；translate（50%，50%），第一个50%是宽度的50%，第二个50%是高度的50%
对行内元素没有效果
（3）利用2D转换实现定位盒子的水平和垂直居中
核心思想：先让盒子距离左侧50%的距离，距离顶部50%的距离，再使用translate属性移动盒子本身高度和宽度的一半
（4）属性值：rotate 旋转角度
transform:rotate（度数）
度数的单位是deg，度数为正值代表顺时针旋转，度数为负值代表逆时针旋转
2、2D转换中心点：
transform-origin:x  y;——>使用具体的像素值来进行中心点的设置时，移动的参照点是盒子的左上角
transform-origin:right  bottom;——>使用方位名词来进行中心点设置
3、2D转换之缩放
（1）语法
transform:scale(4); 代表宽度和高度都放大四倍
transform: scale(2, 3);  宽度放大2倍，高度放大3倍
transform: scale(0.5, 0.5);  宽度和高度缩小原来的一半

（2）scale缩放和width/height设置盒子大小的区别
width/height设置宽高时，上沿不动，只向下来改变宽高度，会对其他的盒子有影响
scale进行缩放时，默认以盒子的中心点来进行缩放，并且不会影响其他的盒子
4、CSS的动画制作
（1）动画序列
0%：动画的开始； 100%：动画的结束。这样的规则叫做动画序列
在@keyframes 中固定CSS的样式，可以创建由当前样式转化为新样式的动画效果（keyframes叫做关键帧）
可以改变任意的样式和任意多的次数
可以使用百分比来规定变化发生的时间，或者使用关键字“from”和“to”来实现，等同于0%~100%

（2）动画制作的步骤：定义动画；调用动画
5、swiper制作轮播图
寻找需要的样式在新窗口中打开
复制源码
修改引入文件路径
将js代码中的类名和整个swiper盒子的类名保持一致
修改自己需要的结构和样式即可

流式布局和flex布局
6、移动端的基础
（1）PC端常见的浏览器：Safari、火狐浏览器、谷歌浏览器、百度浏览器、UC浏览器、360浏览器等
（2）移动端常见的浏览器：UC浏览器、夸克浏览器、QQ浏览器、百度手机浏览器、搜狗手机浏览器等
（3）国内的UC和QQ、百度等浏览器都是根据Webkit修改过来的内核，国内目前没有自主研发的浏览器内核
（4）总结：兼容移动端主流的浏览器，主要关注Webkit内核的浏览器即可

7、手机屏幕的分辨率
（1）移动端设备的屏幕尺寸非常多、碎片化比较严重
（2）安卓设备的分辨率一般有：480X800、480X854、720X1280、1080X1920等，还有2K、4K屏等
（3）苹果设备的分辨率一般有：640X960、640X1136、750X1334、1242X2208、2778X1284等
（4）作为开发者不需要关注这些分辨率，开发者常用的尺寸单位是PX

8、移动端调试的方法
（1）Chrome DevTools 的模拟手机调试
（2）使用LiveServer 来启动网站，使用手机进行访问（手机和电脑要保持在一个局域网内）
（3）使用外网服务器部署网站后，直接使用IP地址或者域名进行访问

二、今日问题
无
三、解决方案
无

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)