在学习路上的一些总结，欢迎大佬指错。

移动设备适配?

移动设备适配是指将网站或应用程序调整为在移动设备上进行良好和符合预期的显示和交互。

rem方案

rem 是一种相对单位，它是相对于根元素（常见的是 <html> 元素）的字体大小（font-size）进行计算的。

rem与像素单位（px）不同，rem 的大小会随着根元素的字体大小的改变而改变。通常情况下，浏览器的默认根元素字体大小为 16px。因此，如果根元素的字体大小为 16px，1rem 就等于 16px。

在移动设备适配中，通常会使用 rem 单位来实现响应式布局。通过将元素的尺寸设置为相对于根元素字体大小的 rem 值，可以根据设备的屏幕大小自动调整元素的尺寸，从而适应不同的屏幕尺寸。

/* 设置html元素的字体大小为 16px，即 1rem = 16px */
html {
    font-size: 16px;
}
.box { 
    width: 10rem; /* 宽度会根据根元素的字体大小进行缩放 */
    height: 5rem; /* 高度会根据根元素的字体大小进行缩放 */
    margin-bottom: 1rem; /* 边距会根据根元素的字体大小进行缩放 */ 
}

使用媒体查询设置不同屏幕下的根元素字体大小：通过使用媒体查询，你可以根据不同的屏幕宽度范围设置不同的根元素字体大小，从而实现针对不同屏幕尺寸的适配。

@media screen and (max-width: 600px) { 
 html {
     font-size: 12px; /* 在宽度小于600px的情况下，将根元素的字体大小设置为12px */
 } 
}
@media screen and (min-width: 601px) and (max-width: 1024px) {
 html {
     font-size: 14px; /* 在宽度介于601px和1024px之间的情况下，将根元素的字体大小设置为14px */
 }
}
@media screen and (min-width: 1025px) { 
 html { 
     font-size: 16px; /* 在宽度大于1025px的情况下，将根元素的字体大小设置为16px */
 }
}

*媒体查询

CSS 媒体查询为你提供了一种应用 CSS 的方法，仅在浏览器和设备的环境与你指定的规则相匹配的时候 CSS 才会真的被应用，例如“视口宽于 480 像素”的时候。

@media media-type and (media-feature-rule) {
 /* 样式规则 */
}

它由以下部分组成：

一个媒体类型，告诉浏览器这段代码是用在什么类型的媒体上的（例如印刷品或者屏幕）；
一个媒体表达式，是一个被包含的 CSS 生效所需的规则或者测试；
一组 CSS 规则，会在测试通过且媒体类型正确的时候应用。
mediatype：指定媒体类型，常见的有 screen（计算机屏幕，默认值）、print（打印设备）、speech（屏幕阅读器等）。
media feature：指定媒体特性，用于匹配设备的属性。例如，max-width（最大宽度）、min-width（最小宽度）、orientation（方向：横向或纵向）、resolution（分辨率）等

以下是常见：

max-width：最大宽度，用于设置设备的最大显示宽度。
min-width：最小宽度，用于设置设备的最小显示宽度。
orientation：方向，用于设置设备的横向或纵向显示模式。
resolution：分辨率，用于设置设备的屏幕分辨率。

rem+vw布局

html{
   font-size:26.6667vw;/* 100px */  
}  
div{  
  font-size:0.16rem;/* 100px */  
}

判断移动设备

一.用户代理userAgent

function isPhone() {
var mobileDevices = ["iPhone", "iPad", "Android"]; 
  return mobileDevices.some(function(device) { 
   return navigator.userAgent.includes(device);
});
}

二.媒体查询

//设定一个阈值判断
if (window.matchMedia("(max-width: 767px)").matches) {
// 移动端 
} else { 
// 桌面端 
}

自适应屏幕大小

当设备为移动端时，通过获取当前设备的视口宽度和高度，然后将这些值设置为背景容器的宽度和高度，从而实现自适应移动端设备屏幕大小的背景效果。

  if (/Mobi|Android/i.test(navigator.userAgent)) {
    // 移动端
        var bg= document.querySelector('.contain');
        //获取当前设备的视口宽度
        sw = document.documentElement.clientWidth + 'px';
        //获取当前设备的视口高度
        sh = document.documentElement.clientHeight + 'px';
        bg.style.width = sw;
        bg.style.height = sh;
  } else {
    // 桌面端
  }

前端：设备适配