• 移动端适配解决方案

    一.rem适配

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

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     <style>
    7.         html {
    8.             font-size: 14px;
    9.         }
    10.         div {
    11.             font-size: 12px;
    12.         }
    13.         p {
    14.             /* width: 10em; */
    15.             /* height: 10em; */
    16.             width: 10rem;
    17.             height: 10rem;
    18.             background-color: aqua;
    19.         }
    20.     style>
    21. head>
    22. <body>
    23.     <div>
    24.         <p>p>
    25.     div>
    26. body>
    27. 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

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

     第三步: 引入rem

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

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

    1. const px2rem = require('postcss-px2rem');
    2. const postcss = px2rem({
    3.     remUnit: 37.5, //基准大小 baseSize，需要和rem.js中相同
    4. });
    5. module.exports = {
    6.   css: {
    7.     loaderOptions: {
    8.       postcss: {
    9.         plugins: [
    10.           postcss
    11.         ]
    12.       }
    13.     }
    14.   }

     注意事项

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

     二.viewport适配

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

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

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

    1. 	// 计算屏幕宽度
    2. var screen = document.documentElement.clientWidth;
    3. 	// 设置根元素字体大小
    4. document.documentElement.style.fontSize = screen + 'px';
    1. .box{
    2. 	width：200px;
    3.     height:200px;
    4. }
    1. .box{
    2. 	width：200/375rem;
    3.     height:200/375rem;
    4. }

    分析：

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

     

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

  • 相关阅读:
    7.2 IDA 破解实例
    05.继承
    Nginx配置全局https
    【Python3】Python中的字符串
    详谈判断点在多边形内的七种方法
    Mini Linux嵌入式设备服务器
    RDPCrystal EDI SDK 10.0.4.X Crack
    windows11 连接蓝牙鼠标
    编译libigl笔记
    如何在spark中使用scikit-learn和tensorflow等第三方python包
  • 原文地址：https://blog.csdn.net/weixin_71732962/article/details/132707215