前端功能设计篇 --【移动端适配】-CSDN博客

本文链接：https://blog.csdn.net/weixin_39805244/article/details/106823554

前端目录：https://blog.csdn.net/weixin_39805244/article/details/109404606

移动端适配的最终效果：

页面铺满整个屏幕，不需要缩放或者滚动就可以显示完整的网页；
在不同分辨率的屏幕，显示的文字和图标大小总是合适。

关于viewport(视口):

visual viewport：即window.innerWidth；
layout viewport：即document.documentElement.clientWidth；
idea viewport：宽度等于visual viewport宽度；

note:

layout viewport为固定几个值，跟浏览器类型有关，但跟实际手机设备屏幕分辨率无关。

visual viewport跟实际手机设备屏幕分辨率有关。

idea viewport是移动端适配的最终目标，此时页面能够完美地展示。

以下viewport meta标签的作用是定义layout viewport：

让当前viewport的宽度等于设备的宽度。
页面放大倍数为1。
不允许用户手动缩放。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

当layout viewport 大于visual viewport时，会出现滑动滚条。

屏幕分辨率是指纵横向上的像素点数(单位px)。相同面积的屏幕，分辨率越高，像素点越多，单个像素尺寸越小。所以，在不同的移动设备上，1px CSS像素 = 1px 物理像素不一定始终是成立。分辨率增大了，但屏幕尺寸并没有变大多少，必须让css中的1px代表更多的物理像素，才能让1px的东西在屏幕上的大小与那些低分辨率的设备差不多，不然就会因为太小而看不清。

现在手机的idea viewport宽度都是非常接近的(常见的有320、360、384、400)，所以当我们针对某个设备的idea viewport做出的网站，在其他设备上也的表现也不会相差太多。

移动端适配方案：

viewport（scale=1/dpr）
rem
flex
vm/vh

Vue2.0配置postcss-px2rem

安装postcss-px2rem：npm install postcss-px2rem
配置remUnit：

在根目录下的vue.config.js文件中添加以下配置：

module.exports = {
    css:{
        loaderOptions:{
            postcss:{
                plugins:[
                    require('postcss-px2rem')({remunit:37.5}),
                ]
            }
        }
    }
}

remUnit: 37.5 代表 1rem = 37.5px; 所以当你一个37.5px值时，它会自动转成 (37.5px/37.5)rem。转化完之后，你还需要在根元素设置font-size,因为rem是相对根元素来设置大小的。
在根目录下的App.vue中配置根元素的font-size：
```
<style>
body,html{
    font-size:10vw;
}
</style>
```
在以上的配置中，当实际页面宽度为375px时，刚好铺满屏幕。所以此时前端可以根据宽度为375px的UI页面进行开发。

ipad适配

<script>
    // 用于适配ipad以及ipad pro
    if( /(iPhone|iPad|iPhone OS|Phone|iPod|iOS)/i.test(navigator.userAgent)){
        let head = document.getElementsByTagName('head');
        let viewport = document.createElement('meta');
        viewport.name = 'viewport';
        viewport.content ='target-densitydpi=device-dpi, width=480px, user-scalable=no';
        head.length > 0 && head[head.length - 1].appendChild(viewport);
    }
</script>