html5移动端各种适配

最新推荐文章于 2025-03-06 18:05:53 发布

温凉要加油

最新推荐文章于 2025-03-06 18:05:53 发布

阅读量1.2k

点赞数 1

本文链接：https://blog.youkuaiyun.com/luvzen0127/article/details/119188179

版权

本文介绍了HTML5移动端的适配方法，包括rem基础、使用JavaScript和Less进行适配，以及vw单位的运用。通过设置不同设备的基准值，如375px时1rem为50px，利用js计算或px2rem插件辅助转换。此外，还探讨了基于vw的满屏显示和按比例显示的实现，以及flexible.js作为另一种适配方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

根据老师上课内容写给自己看看

首先准备一个div盒子box

<div class="box"></div>

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <link rel="stylesheet" href="./rem.css">
</head>
<body>
    <div class="box">
        
    </div>
</body>
</html>

初始样式：

.box{
  width: 345px;
  height: 100px;
  background-color: gold;
  margin: 0 auto;
  margin-top: 15.px;

}

1.rem基础

<!-- rem 相对于根标签的大小 默认 chrome-->
    <!--1rem = 16px-->
    <style>
        /* em 单位：相对于自身或者是自身的上级字体的大小*/
        html{
            font-size: 20px;
        }
        .box{
            width: 10rem;
            height: 10rem;
            background-color: greenyellow;
        }
    </style>

浏览器支持的font-size最小为12px，默认是16px

2.使用js代码更改实现适配

2.1 less除法

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html{
  font-size: 50px;
        }
@fontSize: 50rem;
.box{
  /* 基于 rem 布局*/
  /*把页面代码全部转换为基于 rem 的单位*/

  /* 1. less 计算*/
  /* 2. 编辑器一般都自带插件可以做快速的计算 webstorm vscode...*/
  width: 345./@fontSize;

  height: 100./@fontSize;
  background-color: gold;
  margin: 0 auto;
  margin-top: 15./@fontSize;

}

经过转换css得到的结果

.box {
/* rem值计算公式： 设备的独立像素宽度 x 标准设计稿下的 font-size / 标准设计稿的 设备独立像素的宽度*/
  width: 6.9rem;
  height: 2rem;
  background-color: gold;
  margin: 0 auto;
  margin-top: 0.3rem;
}

js代码

以物理像素375为基准，预设置50px为1rem计算，适配其他物理像素设备，计算单位为px

<!--计算不同设备下的 根 font-size-->
/*设备的独立像素宽度 */
    console.log( document.documentElement.clientWidth  * 50 / 375);

    function adapter(){
        var fontSize = document.documentElement.clientWidth  * 50 / 375;
        /* 如何给 html 设置 font-size*/
        document.documentElement.style.fontSize = fontSize + 'px';
    }

    adapter();

    window.onresize = adapter;

在浏览器打开检查能看到不同手机型号下盒子的不同fz大小

2.2 webstrom的px2rem插件计算

首先在设置Setting里下载安装插件px2rem

因为之前375我用的50所以设置的50

原本代码

快捷键计算 alt + d后

@fontSize: 50rem;
.box{
  /* 345 / 50 rem*/
  /* 快捷键计算 alt + d*/
  width: 6.9rem;
  height: 2rem;
  background-color: gold;
  margin: 0 auto;
  margin-top: 0.3rem;

}

效果：在375下可以不使用js代码获取屏幕像素进行换算，因为就是以375为基准做的，如果要换到其他型号手机屏幕请在最后加上js代码，不然只会是单纯的345居中

不加js

加了js

3. 基于vw的方式实现适配

不需要用到js代码

vw: view width 相对于当前视口的宽度的单位

3.1满屏显示

.box{
           /* box 铺满整个视窗 */
            width: 100vw;
            height: 100vh;

            background-color: gold;
        }

这样就是在任何窗口都是满屏

3.2根据比例显示

之前设置了在375独立像素下：1rem=50px ，换成vm又是多少呢？

 1vw 当前设备独立像素的宽度 * （1/100）   375下1vm ==3.75px

50px == 13.333vw

换成414独立像素 1rem = 55.2px == 13.333vw 1vm== 4.14px

less代码如下

html{
  font-size: 13.333vw;
}

@fontSize: 50rem;
.box{

  width: 345./@fontSize;
  height: 100./@fontSize;
  background-color: gold;
  margin: 0 auto;
  margin-top: 15./@fontSize;

}

效果如下：（因为有小数点所以计算可能没有整数精确）