移动端

一、 对viewport的理解？

 <meta name='viewport' content='width=device-width,inital-scale='1',
 maximun-scale='1'，minimum-scale='1',user-scalable='no'>

width:viewport的宽度
inital-scale:页面的初始缩放值
maximum-scale：允许用户缩放的最大值
minimum-scale ：允许用户缩放的最小值
user-scalable:是否允许用户缩放 允许值为yes，禁止值为no

二、对vw和vh的理解？

把设备的宽高分成100份，相当于100vw和100vh
1份表示1vw和1vh

三、移动端1px边框？为啥会出现这样的问题？

因为手机有不同的像素密度，如果显示屏的分辨率始终是普通屏幕的2倍，那么1px就在移动设备下显示为2px
有两种解决办法：
①使用0.5px

    p{
        border:0.5px solid #ccc;
    }

②使用伪类（::after 或者 ::before）+transform实现效果
比如说，我们来给p标签加一个1px的border
给p进行相对定位. p::after进行绝对定位，再用transform缩小0.5倍

    p{
        border:0;
        position:relative;
    }
    p::after{
        display:block;
        content:'';
        width:100%;
        height:1px;
        background:#ccc;
        transform:scaleX(0.5);
        position:absolute;
        bottom:0;
    }