前端自适应布局

最新推荐文章于 2025-05-15 13:39:43 发布

AldarLin

最新推荐文章于 2025-05-15 13:39:43 发布

阅读量4.3k

点赞数 2

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/qq_34416331/article/details/103658179

版权

前端专栏收录该内容

19 篇文章

订阅专栏

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

一、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

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