概述 - 了解
什么是移动端适配
移动端开发目前主要包括三类：
1.原生App开发（iOS、Android、RN、uniapp、Flutter等）
2.小程序开发（原生小程序、uniapp、Taro等）
3.Web页面（移动端的Web页面，可以使用浏览器或者webview浏览）
两个概念：
自适应：根据不同的设备屏幕大小来自动调整尺寸、大小
响应式：会随着屏幕的实时变动而自动调整，是一种自适应
视口
视口概念：在一个浏览器中，我们可以看到的可视区域就是视口（viewport） – 比如，固定定位（flexd）其实就属于是相对于视口来定位的
1.布局视口：布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。根据设备的不同，布局视口的默认宽度有可能是768px、980px或1024px等
2.视觉视口：视觉视口是指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度
3.理想视口：理想视口是指对设备来讲最理想的视口尺寸。采用理想视口的方式，可以使网页在移动端浏览器上获得最理想的浏览和阅读的宽度
默认情况下，浏览器在移动端在展示pc端的网页时，会将布局视口（基本情况下都是按照980px的布局视口来进行缩放）的内容等比例的缩放至视觉视口的大小
但里面定义的宽高时不会有数值上的变化的，即在浏览器查看某个何止的宽高时，会是原先在布局视口定义的大小
viewpoort设置🔺
<!-- 只用于移动端 - pc端没有效果 -->
<!-- width第一个值表示设置布局视口的宽度 -->
<meta name="viewport" content="width=980px"> <!-- 默认布局视口是980px，设置这条语句相当于默认情况 -->
<!-- 一般情况下，就是要转化成多大的移动端视口，就将content中的width（布局视口）设置成多大即可 - 但移动端的屏幕是有各种各样的宽度的 -- 所以异步使用设备宽度 -->
<!-- devise-width【设备宽度】 -->
<meta name="viewport" content="width=devise-width">
<!-- 设置后它不会在进行等比缩小，相当于设置多大就是多大【后续再做适配的操作】 -->
<!-- content多个属性（逗号分隔） -->
<!-- initial-scale - 默认网页缩放比例 -->
<!-- user-scalable - 用户移动端是否可以手动缩放页面【值：no或yes】- 通常情况不允许手动缩放【因为会影响基本的布局】 --> <!-- 有写浏览器会忽视该条规则 -->
<!-- 通常情况下，因为有些浏览器会忽略上面的禁止手动缩放发规则 - 这时就可以使用该属性来限制用户的缩放 -->
<!-- minimun-scale - 表示缩放比例的最小值 -->
<!-- maximun-scale - 表示缩放比例的最大值 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minmun-scale=1.0, maxmun-scale=1.0">
<!-- 让最值的缩放比例都设置成 1.0 也可以让用户禁止缩放 -->
适配
移动端适配-各个方案解析
1.百分比 （不同属性的百分比，相对的是可能是参照物，所以往往百分比很难统一）
因为百分比的相对性的问题等原因，所以很难能达到统一，所以很少会用百分比是做移动端适配
2.rem （rem单位相对的是"html中的font-size的大小"）
使用rem是，在不同点屏幕中只需给对应的屏幕设置好对应html的font-size即可【先将页面中的盒子与字体大小等都设置为rem值】
相当于是只需要通过媒体查询（@media），来控制每个设备下的html的font-siae即可
🔺vs code插件 px to rem & rpx & vw ，会显示px中rem的对应值
3.vw/vh 1vw为设备宽度的1%
可以理解为 1vw 就等于设备的理想视口中宽度的 1% -如-> 在375的屏幕上1vw=3.75px，所以在375的屏幕中 100px/3.75 就是100px的vw值
vw可以不用借助媒体查询来更改大小，与rem相比都各有优势吧，（少用）
vh:同理，相当于是设备窗口大小的1%（不过基本就是有vw来适应即可，因为…额…）
🔺vs code插件 px-to-vw 书写px值后，鼠标移入所想改变的值，按 Ctrl + Z 自动转换 vw 值 使用该插件时，记得要先将插件的配置成对应的屏幕尺寸先
4.flex
略…
注意
🔺🔺🔺上面两个插件都需要提前设好参考值，才能正确的显示对应的数值
rem方案
rem单位是相对于html元素中的font-size来设置的，如果想在不同的屏幕下有不同的尺寸，可以动态的修改html元素中的font-size
1.媒体查询设置font-size
/* 其实就相当于是使用媒体查询的方法，设置断点是的移动端适配 */
@media screen and (min-width:320px){
html{
font-size:0.2px;
}
}
@media screen and (min-width:450px){
html{
font-size:0.4px;
}
}
@media screen and (min-width:650px){
html{
font-size:0.6px;
}
}
@media screen and (min-width:950px){
html{
font-size:0.8px;
}
}
@media screen and (min-width:1150px){
html{
font-size:1px;
}
}
....
缺点：需要书写大量的媒体查询，不好维护 – 媒体查询只能是断点式，而不能实时更新
2.编写js动态font-size
可以动态的设置html中的font-size
// 基本过程 - 不能保证第一次进来的时候，设置一下html中的font-size
const htmlEl = document.documentElement;
window.onresize = () =>{ // 监听客户端窗口大小事件
const htmlWidth = htmlEl.clientWidth; // clientWidth - 获取客户端设备宽度
// 可以动态的得到 htmlFontSize 的值 （除多少康情况） 如我的电脑屏幕为1394，我就可以除以1394，那么我的htmlFontSize初始值就是1
const htmlFontSize = htmlWidth / 1394; // 除以客户端设备的宽度 - 就相当于是等于 1
// console.log(htmlFontSize);
htmlEl.style.fontSize = htmlFontSize + 'px'; // 修改html中的font-size
}
// 与上面基本上没有区别，不过把动态更改html中的font-size声明个函数来 -- 可以设置默认值
const htmlEl = document.documentElement;
function setRemUnit (){
const htmlWidth = htmlEl.clientWidth;
// 可以动态的得到 htmlFontSize 的值 （除多少康情况） 如我的电脑屏幕为1394，我就可以除以1394，那么我的htmlFontSize初始值就是1
const htmlFontSize = htmlWidth / 1394;
// console.log(htmlFontSize);
htmlEl.style.fontSize = htmlFontSize + 'px';
}
// 保证第一次进来的时候，设置一下html中的font-size
setRemUnit(); // 设置默认情况的font-size - 即先判断 clientWindow 的宽度 在确定html中的font-size
window.addEventListener('resize',setRemUnit);
// pageshow 事件表示前进后退的时候触发 - 里面有一参数，返回的是true或false - 表示是否前进或后退
// 在移动端预览的时候，当调了一下窗口的宽度没有刷新的情况下后退或前进一步，因为之前加载好的页面是已经缓存下来的，所以样式难免会有一些问题
// pageshow事件就可以监听前进后退的一个状态，所以就能解决该问题....
const htmlEl = document.documentElement;
function setRemUnit (){
const htmlWidth = htmlEl.clientWidth;
const htmlFontSize = htmlWidth / 1394;
htmlEl.style.fontSize = htmlFontSize + 'px';
}
setRemUnit();
window.addEventListener('resize',setRemUnit);
window.addEventListener('pageshow',function (e){ // 当前进或后退的时候，
if(e){
setRemUnit();
}
});
3.lib-flexible库动态font-size
lib-flexible库 - github中的一个库
// 库与js方法基本一样，库相当于是别人写好的方法（框架...）
需要注意当有一个文本没有设置font-size的时候，它的所有父级都没有设置字体大小时只有html设置了，该字体会继承html中的字体大小 （可以给body设置一个定值，那么它就会就近继承，就不会继承到html中的动态font-size）
4px转换rem的方案
可以使用 less或sass 中的函数，进行调用的方法… ， 因为还没学过less，所以下面使用sass演示
// 当设计稿为375px的时候
// 定义一个函数，用于转换rem单位，使用的时候可以直接调用（可复性强）
@function pxToRem($px){
@return 1rem * ($px/37.5); // 返回值
}
.box{
width:pxToRem(100); // 调用rem转换
height: pxToRem(100);
}
p{
font-size: pxToRem(16);
}
postcss-pxtorem方案：可以像以前一样的开发模式（以px值），在打包的时候可以借助webpack工具来使用 【后续学习】
vs code插件方案：使用插件时需要设置一下配置（插件扩展设置）–（配置设计稿大小）
vw方案
因为1vw等于设备的1%宽度，所以设备变了1vw的值也会变了，所以这里可以结合rem一起使用（就可以不用那些js监听之类的了）
联合rem
/* 在375的屏幕下的 */
html{
font-size:1vw; /* 1vw == 3.75px */
font-size: .2667vw; /* 这个换算过来就相当于是，1px */
}
/* 联合rem使用 */
/* 因为vw是根据屏幕的大小来决定ve对应多少值的
* 所以可以将html中的font-size设置为单位vw的值
* 在将其它的 box text 等的大小值设置成单位为rem的
* 这样就可以不需要借助 js监听窗口的大小，就可以实现自适应了
* 如下
*/
html{
font-size: .2667vw; /* 约1px */
}
.box{
width:100rem;
height:100rem;
font-size:16rem;
}
/* 切记使用px 转换rem于vw的值时，需要看屏幕大小，去改对应的插件属性值 */
纯vw
/* 在375的屏幕下的 */
/* 可以直接不需要设置html的font-size，相当于不需要动态的改变任何值，来实现自适应
* 当屏幕为375时 --> 1vw=3.75px --> 也就是说100px就等于 100/3.75
* 那就可以直接按照上面的方式来计算vw值，（也就不再需要动态的修改html中的font-size值）
* 使用插件可以直接从 px 转换成 vw值，所以可以更加便利的设置vw （更加简便的实现自适应）
* 使用插件时记得修改一下配置 （相对于（参照物））
*/
.box{
width:26.6667vw;
height: 26.6667vw;
font-size: 4.2667vw;
}
/* px转换成vw也可以一样使用上面转换rem的方法
* 手动计算
* 通过定义函数less与sass，封装调用
* 插件
* webpack插件（后续学习）
*/
其它
vw和rem的对比
rem事实上是作为一种过渡的方案，它利用的也是vw的思想
- 前面不管是我们自己编写的js，还是flexible的源码
- 都是将1rem等同于设计稿的1/10，在利用1rem计算相对于整个屏幕的尺寸大小
- 那么我们来思考，1vw不是刚好等于屏幕的1/100吗?
- 而且相对于rem还更加有优势
vw相比于rem的优势:
- 优势一:不需要去计算html的font-size大小，也不需要给html设置这样一食font-size
- 优势二:不会因为设置html的font-size大小，而必须给body再设置一个font-size，防止继承
- 优势三:因为不依赖font-size的尺寸，所以不用担心某些原因html的font-size尺寸被篡改，页面尺寸混乱
- 优势四: vw相比于rem更加语义化，1vw刚才是1/100的viewport的大小
- 优势五:可以具备rem之前所有的优点
- vw目前只面临一个问题，就是将单位转换成vw即可
使用
目前更推荐使用vw方案，来实现自适应
弊端：永远相对于设备视口宽度
当然因为vw有一个小弊端，所以当一直放大的时候里面的元素等也会一直放大，并且是无法加最大值的 – 这时如果想要他又的最大值的话，那就可以使用 rem 来实现自适应了
兼容性
目前来说，大部分浏览器都可兼容 - 现在很多不兼容的浏览器，加上浏览器的前缀基本都能兼容了
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
