前端网站适配方案（多种移动端设备）

一、意义

解决不同屏幕尺寸和分辨率的移动设备上的网页显示问题，使网页能够在不同设备上达到一致的展示效果。随着移动设备型号数量的爆发式增长，手机屏幕尺寸越来越多样化，网页内容自适应屏幕尺寸进行显示的需求也就越来越强烈。

二、方法

1. Meta Viewport

Meta Viewport是HTML中<meta>标签关于viewport的相关配置，它用于在移动浏览器中通过viewport元标签来控制页面的布局。Viewport是视口的意思，指的是在浏览器中可以看到Web内容的窗口区域。

具体来说，Meta Viewport的使用环节主要包括以下几个方面：

1. 设置页面的宽度：通过设置viewport的宽度（width=device-width），可以使不同手机的布局视口宽度尽量接近可视窗口的值。这样可以确保页面在不同设备上以相同的比例显示，提供更好的用户体验。
2. 控制页面的缩放：通过设置initial-scale属性，可以指定页面在加载时的缩放级别。同时，通过禁用用户缩放（user-scalable=no）可以确保页面在不同设备上保持一致的布局和外观，代码如下:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

2. media Query

Media Query（媒体查询）是 CSS3 引入的一个新语法，它允许开发者根据设备的特定条件（如设备的类型、宽度、高度、方向、分辨率等）来应用不同的CSS样式。这使得网站或应用能够在不同的设备或屏幕尺寸上呈现出最佳的布局和外观。

常见用法：

@media screen and|not|only (media feature) {  
     
}

常用设置：

1. <link rel="stylesheet" media="screen and (max-width: 600px)" href="index.css" />
 
2. @media screen and (max-width: 600px) {
  /* 当屏幕宽度小于或等于600像素时应用的样式 */
  body {
    font-size: 14px;
  }

 @media screen and (min-width: 400px) {
  /* 当屏幕宽度大于或等于1000像素时应用的样式 */
  body {
    font-size: 16px;
  }

注意事项：

• 顺序：后面的设置会覆盖前面的，类似上面，如果屏幕宽度为 500px ，则 body 的字体会设置成16px
• 代码冗余：整个项目会出现多套代码来适配不同的屏幕宽度，可参考淘宝网页端和app端

3. rem 相对单位

rem 是相对于HTML中的根元素的 font-size 计算。如果根元素的 font-size 设置为 16px（这是浏览器的默认值），那么 1rem 等于 16px。

html{
	font-size:16px
}

4. vh vw 相对单位

相对于浏览器的可视窗口百分比的单位

4.1 vw (Viewport Width)

vw 表示视口宽度的百分比。

4.2 vh (Viewport Height)

vh 表示视口高度的百分比

使用：

.card{
 	// 10.5vw 等于视口宽度的10.5%
 	width: 10.5vw
 	 // 20.5vw 等于视口高度的20.5%
 	height:20.5vh;
 }

5. 第三方库

5.1 PostCSS（常用）

一个使用 JavaScript 插件来转换 CSS 代码的工具,包含以下插件

5.1.1 postcss-pxtorem（官网地址）

自动将 px 单位转换为 rem

配置文件（postcss.config.js）

module.exports = {
  plugins: {
   'postcss-pxtorem': {
     rootValue: 16, // 基准值
     propList: ['*'], // 需要转换的属性列表
     unitPrecision: 5, // 转换后的小数位数
     exclude: /node_modules/ // 排除某些文件夹
   }
 }
}

5.1.2 postcss-plugin-px2rem（官网地址）

用于将 px 转换为 rem

配置文件

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-plugin-px2rem')({
            rootValue: 100, // 换算基数
            exclude: /node_modules/, // 排除文件夹
            minPixelValue: 3 // 最小转换像素值
          })
        ]
      }
    }
  }
}

5.2 TailWindCSS（官网地址）

对各设备屏幕尺寸划分：

module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      // 小手机
      // => @media (min-width: 640px) { ... }

      'md': '768px',
      // 正常手机
      // => @media (min-width: 768px) { ... }

      'lg': '1024px',
      // 平板
      // => @media (min-width: 1024px) { ... }

      'xl': '1280px',
      // 电脑
      // => @media (min-width: 1280px) { ... }

      '2xl': '1536px',
      // 显示屏
      // => @media (min-width: 1536px) { ... }
    }
  }
}

5.3 BootStrapCSS（官网地址）

对各设备屏幕尺寸划分：(BootStrapCSS官方划分)

以上仅为个人学习过程中总结而来，如有错误欢迎指正