前端自适应布局

女爷i 2023-06-24 11:24 20阅读 0赞

在前端开发中，我们不可避免要面临适配问题。本文将介绍几种适配方式：

一、px和em

1.1 px

1.2 em

二、rem

2.1 rem原理

2.2 rem如何计算的

2.3 rem使用

三、使用插件px2rem转换

3.1 原理和优点

3.2 使用方式

--------------------

## 一、px和em ##

px、em、rem都是计量单位，都能表示尺寸。

### 1.1 px ###

px表示的是绝对尺寸，是一个固定大小的单元。像素的计算是针对设备屏幕的，1px就是设备屏幕上的一个点。

由于它是固定大小的单位，一般用它来设计网页，但如果用来在手机/ipad上的话，在不同的屏幕上显示无法做到自适应的效果。

### 1.2 em  ###

em表示的是相对长度单位，它是通过设置文本字体尺寸来实现自适应，它是相对于当前对象内文本的字体尺寸。通常浏览器默认1em=16px，通过设置font-size大小来修改，如：16px\*0.625=10px, 则1em=10px。

但em的值会根据父元素的变化而变化，若是修改了一个父元素的尺寸，其子元素的尺寸都要重新修改。

## 二、rem ##

### 2.1 rem原理 ###

rem是css3新增的一个相对长度单位，解决了em变量依赖父元素尺寸的弊端，而rem只相对于根目录，即html标签。我们只要在html标签上设置font-size大小，文档中的字体大小都会以此为标准，通常使用rem来做自适应布局。

### 2.2 rem如何计算的 ###

rem是将设备屏幕宽度按比例划分的，将屏幕分为均等的100份，则在<html>中设置font-size值为 1rem = 设备宽度/100，之后的元素尺寸设定我们都应使用rem进行设定。当设备宽度改变时，1rem对应的像素就自动修改了。

常见的设备尺寸：
    320px => iphone5/se
    360px => 安卓手机
    375px => iphone6/7/8 iphoneX
    414px => iphone6/7/8 plus
    
    // 设备尺寸为320px时
    1rem = 320/100 = 3.2px
    
    // 设备尺寸为360px时
    1rem = 360/100 = 3.6px
    
    // 设备尺寸为375px时
    1rem = 375/100 = 3.75px
    
    // 设备尺寸为414px时
    1rem = 414/100 = 4.14px

### 2.3 rem使用 ###

**2.3.1 使用枚举类型进行自适应**

// 自适应 
    // ------------------------
    html{
      font-size: 38px;
    }
    @media only screen and (min-width: 320px) {
      html {
        font-size: 42.666px !important;
      }
    }
    @media only screen and (min-width: 360px) {
      html {
        font-size: 48px !important;
      }
    }
    @media only screen and (min-width: 375px) {
      html {
        font-size: 50px !important;
      }
    }
    @media only screen and (min-width: 414px) {
      html {
        font-size: 55.2px !important;
      }
    }
    @media only screen and (min-width: 480px) {
      html {
        font-size: 64px !important;
      }
    }
    @media only screen and (min-width: 560px) {
      html {
        font-size: 74.666px !important;
      }
    }
    @media only screen and (min-width: 640px) {
      html {
        font-size: 85.333px !important;
      }
    }
    @media only screen and (min-width: 720px) {
      html {
        font-size: 96px !important;
      }
    }
    @media only screen and (min-width: 750px) {
      html {
        font-size: 100px !important;
      }
    }
    @media only screen and (min-width: 800px) {
      html {
        font-size: 106.666px !important;
      }
    }
    @media only screen and (min-width: 960px) {
      html {
        font-size: 128px !important;
      }
    }

**2.3.2 使用 rem.js 来计算rem**

在项目中加入rem.js，并引入就可以使用

/* rem.js文件内容 */
    (function () {
        var html = document.documentElement;
    
        function onWindowResize() {
            html.style.fontSize = html.getBoundingClientRect().width / 20 + 'px';
        }
    
        window.addEventListener('resize', onWindowResize);
        onWindowResize();
    })();

## 三、使用插件px2rem转换 ##

### 3.1 原理和优点 ###

使用px2rem插件，可以无需再引入rem项目，插件会自动根据手机型号计算 `dpr` 的值，同时在html根标签内植入一个相应的font-size的值。

**优点如下：**

*  保证不同设备下的统一视觉体验。
 *  不需要你再手动设置 viewport，根据当前环境计算出最适合的 viewport。
 *  支持任意尺寸的设计图，不局限于特定尺寸的设计图。
 *  支持单一项目，多种设计图尺寸，专为解决大型，长周期项目。
 *  提供 **`px2rem`** 转换方法，CSS 布局，零成本转换，原始值不丢失。
 *  有效解决移动端真实 1 像素问题。

### 3.2 使用方式 ###

**3.2.1 安装**

npm i px2rem-loader -D

**3.2.2 在配置中加入这个插件**

可以在webpack中加入配置

plugins:[
      new webpack.LoaderOptionsPlugin({
        vue: {
          postcss: [require('postcss-px2rem')({'remUnit': 100,'remPrecision':8})]
        },
      })
    ]

一般postcss建议单独配置在文件`postcss.config.js`中

module.exports = {
      plugins: [
        require('autoprefixer')({ browsers: 'last 2 versions' }),
        require('postcss-px2rem')({remUnit: 100, remPrecision:8})
      ]
    }

参考链接：

移动端h5之rem布局／px2rem： [https://www.jianshu.com/p/e96ccb603a50][https_www.jianshu.com_p_e96ccb603a50]

px2rem 移动端自适应方案：[https://www.jianshu.com/p/64a6cafb1d5a][https_www.jianshu.com_p_64a6cafb1d5a]

[https_www.jianshu.com_p_e96ccb603a50]: https://www.jianshu.com/p/e96ccb603a50
[https_www.jianshu.com_p_64a6cafb1d5a]: https://www.jianshu.com/p/64a6cafb1d5a