移动端适配解决方案

Aurora_.

于 2023-09-06 09:20:04 发布

阅读量310

点赞数 4

文章标签： javascript 前端 css3 html

本文链接：https://blog.csdn.net/weixin_71732962/article/details/132707215

版权

一.rem适配

rem(root em)是一个相对单位，类似于em，em 是父元素字体大小。
不同的是 rem 的基准是相对于 html 元素的字体大小。
比如，根元素(html) 设置 font-size = 12px; 非根元素设置 width: 2rem; 则换成 px 表示就是24px
(rem: root em，意思是根元素，相对于根元素的字体大小)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html {
            font-size: 14px;
        }
        div {
            font-size: 12px;
        }
        p {
            /* width: 10em; */
            /* height: 10em; */
            width: 10rem;
            height: 10rem;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
</body>
</html>

1.em，相对于父元素，一个页面有多个父元素，这些父元素的字体大小可能不一样。
2.rem，相对于根元素，一个页面只有一个根元素(html)，因此 rem 布局元素之间大小是统一的rem 的优点就是可以通过修改 html 里面的文字大小来改变页面中元素的大小来进行整体控制

使用方式

一、直接使用

在代码中配置好rem比例,代码中直接使用1rem

二、使用插件 px2rem

-1、postcss-px2rem

第一步: 安装插件

npm add postcss-px2rem
//将px转为rem，书写的时候直接写px就可以，编译的时候会将px单位自动转换为对应的rem单位

第二步:添加 rem.js文件

在utils中增加新建config/rem.js

// 基准大小
const baseSize = 37.5
// 设置 rem 函数
function setRem() {
  // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 375
  // 设置页面根节点字体大小
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function() {
  setRem()
}

第三步: 引入rem

在main.js引入rem.js文件
import './config/rem' //px转rem

第四步: 在 vue.config.js 中添加配置

const px2rem = require('postcss-px2rem');
const postcss = px2rem({
    remUnit: 37.5, //基准大小 baseSize，需要和rem.js中相同
});
module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          postcss
        ]
      }
    }
  }

注意事项

代码使用px转换必须是在css文件中,直接在标签中写无效

二.viewport适配

原理：通过设置 initial-scale , 将所有设备布局视口的宽度调整为设计图的宽度.

//获取meta节点
var metaNode = document.querySelector('meta[name=viewport]');
 
//定义设计稿宽度为375
var designWidth = 375;
 
//计算当前屏幕的宽度与设计稿比例
var scale = document.documentElement.clientWidth/designWidth;
 
//通过设置meta元素中content的initial-scale值达到移动端适配
meta.content="initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+",user-scalable=no";

三.JS动态修改配合rem适配

	// 计算屏幕宽度
var screen = document.documentElement.clientWidth;
	// 设置根元素字体大小
document.documentElement.style.fontSize = screen + 'px';

.box{
	width：200px;
    height:200px;
}

.box{
	width：200/375rem;
    height:200/375rem;
}

分析：

这种方法是js动态获取屏幕宽度，直接将html的font-size设置为屏幕的宽度，再在less中进行换算。
若此时js获取的屏幕宽度为750px，html的font-size值设置为750px后，此时计算box的width为400px

200/375rem = 200/375*750 px = 400px