尚硅谷谷粒音乐项目学习笔记及答疑解惑（21-40集）

第二十一集：这一集的数字自动跳转现在不会自动跳转了，即无需禁用电话和邮箱。
13858220633
932731916@qq.com
解决链接按钮高亮问题：
a{
text-decoration: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}

13858220633 解决圆角按钮圆角过圆的问题：圆角过圆问题现在好像没出现。 Font-boosting问题好像也没有出现，不过记得出现要加max-height。 第二十二集：复习了之前的内容。 第二十三集：无缝滑屏（移动端的轮播图），这里的思路需要学习，从一开始搭建静态页面到逐步使用js动态添加，这个思路的逻辑值得好好学习。Ul和li的默认样式就是list-style:none,overflow:hidden是为了避免滑动。将a和img变为block可以消除间隙是因为默认的li里面 第二十四集：setTimeout的出现是因为动态的dom（即使用js创建的dom结构需要一定时间来渲染，所以需要异步添加），这个在我的vue作业https://blog.csdn.net/returnadsss/article/details/128635718?spm=1001.2014.3001.5502里也有相应的代码。这里要搞懂round,floor和ceil的区别。 第二十五集：这里有一些css样式的细节。这里移除span标签的active的js写法其实也是简单的遍历，考虑到这还是培训班老师准备的素材，所以初学者们大可不必担心自己水平不行，多写即可。 第二十六集：之前说过要改2d版本是为了防止图片的重新渲染影响性能，所以采用2d变换可以节约性能，这一点只要记住就可以了。这里要知道的是使用transform的时候不能使用offsetLeft,因为不是同一个图层。还要每次进行transform操作时。 第二十七集：这一集封装组件有点抽象，可以看出这个代码是尚硅谷团队共同完成的，老师讲的时候就比较难懂了，但是代码复杂度其实不高。这里的断点调试功能很重要，需要多练手。 第二十八集：这一集关于模块化的概念很重要，了解一下即可，还有这个通过getAttribute拓展功能的思路也是非常不错。 第三十一集：本来前面代码看着不错，但一实操就发现问题不小，干脆我直接从这一集开始直接用iphone12真机调试，这里maximum-scale现在已经支持了。这里我直接去掉window.onload,因为我们已经把script标签写在最后了。绝对定位模拟固定定位：1、禁止系统滚动条。2、整个应用的滚动条出现在一个顶层元素上。虽然只是一个教程，但这种复杂度稍高的代码就会需要到注释，还有代码的规范，可读性也很重要，这个过程中还要了解vscode的一些快捷键来提高代码效率，同时把可复用的代码封装起来，简化主页逻辑。这里有一个要注意的是浏览器支持使用id选择器的名字作为默认变量名。比如

，js中可以直接使用wrap而不需要querySelector或者getElementBy它。如果不加html,body{ height:100%; overflow: hidden; }则会导致可以滚动。这里这个1080是设计图的宽度，240也是设计图上元素的宽度，只要用这个比值乘以16（约定的值，也可以自定义），获取它在图中的比例大小即可，这里能理解最好，实在不理解可以先有个大体了解以后改正，需要注意的是chome浏览器里你换一个模拟设备需要刷新一次，不然可能会看不到变化影响判断。 这里新版easy-less导致除法运算出错在外面加个括号即可。移动端能给高度尽量给高度，还可以减少重绘重排。 第三十三集：这几集都是在绘图，不过可以看出这个设计图的思路其实也不难，增加了一点信心，css这东西摸一摸怎么都能出东西，就是要多练。这个1px的伪元素在使用时顺序也不要随便调换，对less混合稍加理解即可。这个scaleY只对y轴进行缩放，因为x轴是按比例进行的，所以不用管x轴。 第三十四集：这集这个tools里的addClass等是为了兼容旧版浏览器，不过五年过去，新浏览器早已支持classList,所以这里我们直接用classList改写，啥都照着敲写代码就没意思了。这个preventDefault说是为了防止橡皮效果的，但我安卓手机测试的时候还好，不过还是跟着它的来写算了。 第三十七集：定义了一个变量@rem,这里所说的1rem代表多少位图像素，这是因为我们的设计图也是以位图像素的形式来显示的，所以用实际的像素值除以它就会出现一个小于16的值，这个值除以16就是代表该元素在窗口中的宽度比例。这里还提到混合和继承的区别。继承抽象度更高，类似函数，这个多用一用就懂了，现在只需了解。还有一个滑屏区域必须浮动（为了能被子项撑开，禁止子项换行,子项统一inline-block），width:子项个数*100%。子项：1/子项个数*100%。这个项目的布局也是可以参考的。 第三十八集：3d变化消耗硬件显卡，不触发重绘重排，仅供重要的功能，和图层一样不能开太多。