移动端布局day01

0x00 视口

    移动端有三种视口，第一种是布局视口，它将页面宽度设为980px，未做移动端的网页会自动缩放为980px，所以很多网页我们打开看到的都是缩小了的。第二中是视觉端口，也就是用户看到的视口；第三种视口是理想视口，需要通过meta视口标签来设置布局视口来使其和理想视口宽度一致。

    meta视口标签

0x01 二倍图

    因为像素比的原因，pc网页的图片在移动端会被放大，具体放大多少倍看设备，所以在准备图片时一般会准备更大的图片，比如宽高都为两倍的图片，然后指定大小为正常的一倍，这样在移动端放大时，便不会出现模糊的情况

0x02 移动端特殊样式

   

        /*取消a的高亮*/
        a {
            -webkit-tap-highlight-color: transparent;
        }
        /*取消button的样式,需要加上这个属性才能自定义button样式*/
        input {
            -webkit-appearance: none;
        }
        /*取消长按弹出菜单*/
        img a {
            -webkit-touch-callout: none;
        }

    案例见下一篇博客 京东移动端仿写