实现页面在移动端自适应的方法总结

通常PC端和移动端是分开的两个项目，但最近遇到一个页面较少的pc端项目要求做移动端的自适应。那要做移动端的自适应有哪些方法呢？

在原生html页面下

使用meta标签：viewport

理论上这个标签能适应所有尺寸的屏幕，但不同设备对该标签的解释方式和支持程度不同，造成兼容效果较差

html 复制代码

<meta name="viewport" content="width=device-width, initial-scale=1.0">

在css中使用vw、vh或百分比

百分比：是根据父元素的宽度来确定的子元素的宽度百分比

vw、vh：根据浏览器的视口宽度来决定

在css中使用rem或em

rem：是新增的相对单位，相对于HTML根元素的字体大小来定义的单位

浏览器默认字体单位大小16px,1rem=16px

也可以通过在js处编写一个响应式字体大小的调整方案，根据设备视口宽度动态调整根元素html的字体大小，从而实现页面元素的等比例缩放。

js 复制代码

(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
               // 宽度     
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            // 
            if (clientWidth >= 750) {
                docEl.style.fontSize = '100px';
            } else {
                // 动态设置html的font-size
                docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
               //docEl.style.fontSize = Math.min(100, Math.max(50, 100 * (clientWidth / 750))) + 'px';
            }
         };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

通过监听resize和orientationchange事件来响应屏幕尺寸变化
以750px为基准宽度，当视口宽度≥750px时固定字体大小为100px
小于750px时按比例计算：fontSize = 100 * (clientWidth / 750)
这种方案通常配合rem单位使用，使所有基于rem的尺寸都能自适应

但这种方法还是比较粗略，需要添加最小/最大字体限制防止极端情况。需要使用clamp()函数动态限制其范围，或者配合vw视口单位实现响应式限制。

css 复制代码

.element { 
    font-size: clamp(12px, 4vw, 24px); 
    /* 语法：clamp(最小值, 首选值, 最大值) */ 
 }

css 复制代码

.title { 
    font-size: min(max(16px, 3vw), 28px); 
    /* 确保在 16px-28px 之间 */ 
 }

在vue项目中

若在vue项目中出现要同时包含PC端和移动端自适应时

使用媒体查询media

对需要自适应部分的页面进行详细调整。

css 复制代码

@media (max-width:768px) {
    //样式
}//诸如此类

将PC端页面和移动端页面分开写

为自适应的移动端页面单独写一个文件，与pc端页面的代码文件分开，通过在路由中分别配置对应的路由地址，使用vue-meta单独为移动端配置meta，再通过js编写一个响应式的字体大小的调整方案。

具体详情可查看juejin.cn/post/684490...

总的来说，以上方法是在页面较少时的处理方案，若是大型项目还是将PC端和移动端分开写是最好的，其中使用rem、vw和媒体查询是较提倡的方案。