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

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

 

 

移动端适配的最终效果：

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

 

关于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>