vue移动端页面适配

页面的适配，就是一个页面能在PC端正常访问，同时也可以在移动端正正常访问。

现在我们可以通过弹性布局【Flexible布局】、媒体查询和响应式布局。除此之外，还可以通过rem和vw针对性地解决页面适配问题。

响应式布局

响应式布局的核心，就是一个网站可以兼容多个终端，而不是每一个终端都得开发一个独立的版本。

响应式布局，主要是通过可视区和媒体查询来完成。

在HTML的head标签中的meta标签来设置浏览器的可视区域。

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

在没有摄者浏览器的可视区域前，H5调试效果是这样的：

在这里插入图片描述
超出部分出现了滚动条。

设置可视区域后，效果是这样的：

在这里插入图片描述
注意：简单的了解一下物理像素和CSS像素

像素，也就是px，是图像显示的基本单位，每一个像素可以有颜色数值和位置信息，每一个图像是由无数个像素组成。

物理像素，是设备屏幕拥有多少个像素，主要是和渲染的硬件有关，比如iPhone 6总共有750*1334个物理像素。

CSS像素，就是逻辑像素，是软件程序系统使用的像素。逻辑像素最终会转化为物理像素的。

物理像素和逻辑像素之间的转换，可以通过window.devicePixelRatio来设置【window.devicePixelRatio是一个物理像素和逻辑像素的比例】

一般的屏幕使用1个物理像素来渲染一个逻辑像素，这是后window.devicePixelRatio的值为1。

有一些高清的屏幕，比如苹果的Retina屏幕，使用2个或者3个物理像素来渲染一个逻辑像素，这样屏幕更清晰。

浏览器厂商提供了一种虚拟的布局视区来解决页面在手机上显示的问题，通过meta标签设置Viewport来修改。比如：

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

width：控制可视区域的宽度，比如设置为320，或者device-width,表示设备的实际宽度，这样为了自适应布局。
height：控制可视区域的高度，比如设置为640，或者device-height；
initial-scale：设置页面的初始缩放比例【0~10】，等于1的时候，表示不缩放；大于1时表示放大；小于1表示缩小。initial-scale只是设置初始的比例，用户可以自动放大缩小；
maximum-scale：设置用户手动放大的最大比例，可以设置0到10之间；
minimum-scale：指定页面缩小的最小比例；
user-scalable：表示是否允许用户手动缩放，属性为yes或者no；

当有的浏览器不支持user-scalable=no的时候，可以通过JavaScript来控制，比如：

window.onload = () => {
    
    
    document.addEventListener("touchstart", function (event) {
    
    
        // 两个手指操作
        if (event.touches.length > 0) {
    
    
            event.preventDefault();
        }
    });

    let lastTouchEnd = 0;
    document.addEventListener("touchend", function (event) {
    
    
        let now = (new Date()).getTime();

        // 判断是否是双击，两次间隔小于300ms，认为是双击
        if (now - lastTouchEnd <= 300) {
    
    
            event.preventDefault();
        }

        lastTouchEnd = now;
    })
}

了解了浏览器的可视区域后，接下来就是媒体查询了。

媒体查询

所谓的媒体查询就是告诉浏览器根据不同的条件，渲染不同样式规则。

媒体查询在CSS中设置，以@media开头，然后指定媒体类型，也就是设备类型。随后指定媒体特性，中间用and链接。

完整的语法如下：

@media 媒体类型 and (媒体特性){
    
    
 css样式
}

@media 媒体类型 and (媒体特性),媒体类型 and (媒体特性){
    
    
 css样式
}

另一种方式是直接在link标签中定义，比如：

<link rel="stylesheet" media="媒体类型 and (媒体特性)" href="example.css" />

CSS中的媒体类型为：

all：用于所有设备。
aural：用于语音和声音合成器。
braille：用于盲文触摸式反馈设备。
embossed：用于打印的盲人印刷设备。
handheld：用于掌上设备或更小的设备，如PDA和小型电话（已废弃）。
print：用于打印机和打印预览。
projection：用于投影设备。
screen：用于计算机屏幕、平板电脑、智能手机等。
all：用于所有设备。
aural：用于语音和声音合成器。
braille：用于盲文触摸式反馈设备。
embossed：用于打印的盲人印刷设备。
handheld：用于掌上设备或更小的设备，如PDA和小型电话（已废弃）。
print：用于打印机和打印预览。
projection：用于投影设备。
screen：用于计算机屏幕、平板电脑、智能手机等。

逻辑运算符包括not、and和only。
not运算符用来对一条媒体查询条件的结果进行取反，用来排除某种指定的媒体类型。
only运算符用来指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器

    @media not all {
    
    }
    @media not print and (min-width:700px) {
    
    }
    @media only screen and (min-width: 401px) and (max-width: 600px) {
    
    }
    /* 在支持媒体查询的浏览器中等于*/
    @media screen and (min-width: 401px) and (max-width: 600px) {
    
    }
    /*如果想用于最小宽度为700像素或者横屏的手持设备上*/
    @media screen (min-width:700px),handheld and (orientation:lanscape) {
    
    }

这就是响应式布局的基本配置。