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

不得不说这个移动端的适配问题脑洞非常大，跟以往学习的js语法重点都不一样，本来想通过代码来加深印象，却发现基本概念没搞清楚到15集就有点懵逼了，第二遍再看才发现老师讲的还算不错，确实这些概念有点晦涩难懂，但却很重要。
第一集：webapp和nativeapp的区别，webapp性能低，版本迭代快，是之后的主流，我理解的nativeapp就是类似英雄联盟手游这种的。区分web前端工程师和安卓工程师。独立下载下来的是app,类似微信里面买车票的只能算web应用。
第二集：大概讲了一下手机内置的浏览器更新都比较慢，像uc不属于内置浏览器。
第三集：屏幕尺寸一英寸为2.54厘米，用手机屏幕的斜线距离来代表。Pc端屏幕大，所以不用区分物理像素和css像素。屏幕分辨率代表物理像素（横纵方向上）的个数，单位为px,屏幕分辨率不能拿来比较大小。高清屏：同样大小屏幕上显示的像素由一个变为多个，相同区域下，一个css像素占据4个物理像素。像素密度：屏幕上每英寸可以显示的像素个数,ppi。物理像素：同一个设备下一个物理像素大小相同,不同设备的物理像素大小不一样，同一款设备上1物理像素的大小是不会变的。css像素：一个抽象的单位，在一个标准的显示密度下，一个css像素对应着一个设备像素,js中的抽象单位，与浏览器直接相关。Css像素和物理像素的关系是靠浏览器厂商维护。设备独立像素。位图像素：栅格图像（png,jpg,gif）等的最小的数据单元，1个位图像素对应于一个物理像素，图片才能得到完美的展现。一个css像素占据多少个物理像素取决于屏幕的特性和用户的缩放行为。独立设备像素：密度无关像素，css像素转向物理像素的环节，也是老师用来展示的浏览器页上的那个数值。用电脑端查看手机网页的按钮如图：

第四集：像素比：一个方向上占满一块屏幕需要的物理像素个数/一个方向上占满一块屏幕需要的设备独立像素个数,devicePixelRatio=物理像素/设备独立像素,可以通过window.devicePixelRatio来获取。当写上meta标签后，width=device-width,使css像素与设备独立像素链接了起来，使其相等，使布局视口大小与。即css像素等同于设备独立像素。物理像素和设备独立像素与web开发没有什么关系，开发只专注于css像素，因为只有它面向浏览器。话说这一集最后突然的变声什么鬼。
第五集：移动端容器。布局视口：默认的布局视口宽度远大于屏幕的宽度，可以放下pc端页面的视口，浏览器的概念，和设备没关系，视口单位为css像素。视觉视口：视觉视口可以随着用户的缩放而改变，默认情况下等同于布局视口。理想视口：加了meta标签后，布局视口视觉视口一样大时。这一集各种视口还挺烧脑，不懂的可以重头看，务必搞清楚后面才不会晕。
第六集：在物理像素和css像素1比1的情况下，可以认为布局视口比设备宽度（分辨率）大出很多。布局视口：let layout=document.documentElement.clientWidth;//layout的宽度，没有兼容性问题
视觉视口：let visual=window.innerWidth;//visual的宽度，接近全部支持
理想视口：let dream=screen.width;//一半代表理想视口的宽度，一半代表设备的分辨率，有很大的兼容性问题。
第七集：这一集通过手机端浏览本地pc浏览器网站，这里要注意不论是电脑宽带开wifi还是手机开热点电脑连接，手机和电脑都是在同一网段的，在使用草料二维码登录时要注意ip地址是无线局域网适配器 WLAN里的ipv4地址。PC端放大时布局视口的尺寸也会变化。
第八集：initial-scale=1.0gh=device-width一样，系统缩放改变布局视口和视觉视口，initial-scale=2,参照与理想视口进行缩放，比如原来的布局视口375css像素，现在187.5css像素。
第九集：完美视口：width=device-width,initial-scale=1.0后的视口，可以出现滚动条。Width=device-width,initial-scale=2.0,布局视口375，视觉视口187.5，这两个视口谁大听谁的。移动端滚动条的出现跟视觉视口有关系，元素大于视觉视口会出现滚动条。
第十集：讲了一些概念user-scalable=no,minimum-scale=1.0,maximum-scale=1.0,minimun-scale和maximum-scale
第十一集：等比问题：适配是为了在加meta标签下实现等比效果（不同设备效果一样），如果不加meta标签则会显得版面很小，内容不清楚，但也是等比的。
第十二集：使用完美视口解决太大的元素超过视觉视口后不出现滚动条的问题。有viewport:不等比，每一个css像素在不同设备占据的物理像素的个数一样。
第十三集：其他的有些绕的略过，chrome下1em=16px，em为自身font-size,rem相当于html根标签的font-size,let html=document.querySelector(“html”);html.style.fontSize=document.documentElement.clientWidth/16+”px”;相当于宽度为16rem,元素8rem则占据一半。
第十四集：rem适配。基本跟13集差不多，封装了页面适配的写法： let styleNode=document.createElement(“style”);
let w=document.documentElement.clientWidth/16;
styleNode.innerHTML=“html{font-size:”+w+“px!important}”;
document.head.appendChild(styleNode);
第十五集：viewport适配，这种适配不能使用完美视口，scale大于1放大操作。在viewport适配方案中，每一个元素在不同设备上占据的css像素的个数是一样的，但是css像素和物理像素的比例是不一样的，等比的。要加meta标签： let targetW=640;
let scale=document.documentElement.clientWidth/targetW;
let meta=document.querySelector(“meta[name=‘viewport’]”);
meta.content=“initial-scale=”+scale+“,minimum-scale=”+scale+“,maximum-scale=”+scale+“,user-scalable=no”;优点：所量即所得，缺点，没有使用完美视口。还可以使用百分比适配，但页面复杂百分比适配不合适。还可以不做适配。
第十六集：既适配px又适配rem: (function(){
let dpr=window.devicePixelRatio||1;
let styleNode=document.createElement(“style”);
let w=document.documentElement.clientWidth*dpr/16;
styleNode.innerHTML=“html{font-size:”+w+“px!important}”;
document.head.appendChild(styleNode);
let scale=1/dpr;
let meta=document.querySelector(“meta[name=‘viewport’]”);
meta.content=“width=device-width,initial-scale=”+scale;
})()
还有一种当前最主流的
第十七集：IE6现在已经废弃了，所以不管。
第十八集：移动端事件基础，querySelector/querySelectorAll的问题是它拿到的是一个静态列表。getElement获取的是动态列表，可以检测到dom的改变。当dom作用域变化时要重新获取querySelector。移动端两类事件，触屏事件和指针事件。Touchstart,touchmove不可能单独触发,touchend。可以使用addEventListener的dom2方式来添加事件，dom2事件代码 window.οnlοad=function(){
let item=document.querySelector(“.item”);
item.addEventListener(“touchstart”,function(ev){
ev=ev||event;
ev.preventDefault();
console.log(“touchstart”)
})
item.addEventListener(“touchmove”,function(){
console.log(“touchmove”)
})
item.addEventListener(“touchend”,function(){
console.log(“touchend”)
})
}
真机和模拟器会有差距。阻止浏览器的所有默认行为的代码：

阻止冒泡的方法：
#wrap{
width: 400px;
height: 400px;
background:pink;
}
#inner{
width: 200px;
height: 200px;
background:gray;
}

    </div>
</div>

尚硅谷谷粒音乐项目学习笔记及答疑解惑（1-20集）相关推荐

尚硅谷谷粒商城项目学习笔记-基础-P1项目搭建
基础-P1项目搭建 0.虚拟机 1.项目架构 1.1Docker 1.1Docker命令 1.3Docker容器文件挂载与端口映射 1.2微服务-注册中心.配置中心.网关 1.3工具配置 1.3.1 ...
Vue数据代理+事件处理+事件修饰符的作用+计算属性的使用，尚硅谷Vue系列教程学习笔记（2）
尚硅谷Vue系列教程学习笔记(2) 参考课程:<尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通> 参考链接:https://www.bilibili.com/video/ ...
尚硅谷——谷粒商城项目开发记录——2021.11.19
尚硅谷--谷粒商城项目开发记录--2021.11.19 出现错误 1.SpringBoot测试类出现Could not autowire. No beans of 'BrandService' typ ...
尚硅谷——谷粒商城项目开发记录——2021.11.22
尚硅谷--谷粒商城项目开发记录--2021.11.22 概念: 1.对象优化: 新增的API: ES6 给 Object 拓展了许多新的方法,如: keys(obj): 获取对象的所有 key 形成的 ...
尚硅谷——谷粒商城项目开发记录——2021.11.21
尚硅谷--谷粒商城项目开发记录--2021.11.21 概念: 1.var和let的区别: 作用域: var 声明的变量往往会越域 let 声明的变量有严格局部作用域声明次数: var 可以声明多次 ...
尚硅谷——谷粒商城项目开发记录——2021.11.20
尚硅谷--谷粒商城项目开发记录--2021.11.20 概念: 1.SpringCloud Alibaba: 简介: Spring Cloud Alibaba 致力于提供微服务开发的一站式解决方案.此 ...
SpringBoot练手项目《尚硅谷智慧校园》学习笔记
一项目展示 1 登录及角色控制 2首页展示 3 业务模块展示二智慧校园系统简介 2.1 项目简介智慧校园管理系统:主要是以年级.班级为单位,进行老师和学生信息记录和统计功能.项目采用前 ...
【尚硅谷/周阳】JUC学习笔记
JUC学习笔记[尚硅谷/周阳] 本文章基于B站视频教程[juc 与 jvm 并发编程 Java 必学_阳哥- 尚硅谷]进行整理记录,仅用于个人学习,交流使用. 目录标题 JUC学习笔记[尚硅谷/周阳] ...
尚硅谷Spring注解开发学习笔记
文章目录前言 1.课程安排 1.1.容器 1.2.扩展原理 1.3.Web 2.配置文件开发 2.1.导入Spring-context依赖包 2.2.编写Spring配置文件 2.3.编写Perso ...

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

尚硅谷谷粒音乐项目学习笔记及答疑解惑（1-20集）相关推荐

最新文章

热门文章