0m笔记 | 事件

@media all and ...... max-width -1 ;

max-width:1024px，在1024以下 包括1024，所以更严谨的作法是 @media all and (min-width: 1024px) and (max-width:1099px)
min-width:1200px ，在1200之上 包括1200

    @media all and (min-width: 1200px) {
        .box{
            width: 1200px;
            background: red;
        }
    }

    @media all and (min-width: 1024px) and (max-width:1199px) {
        .box{
            width: 1024px;
            background: blue;
        }
    }

    @media all and (min-width: 400px) and (max-width: 1023px) {

        .box{
            width: 400px;
            height: 400px;
            background: yellow;
        }
    }

    @media all and (min-width: 220px) and (max-width: 399px) {

        .box{
            width: 220px;
            height: 220px;
            background: pink;
        }
    }
    @media all and (max-width: 219px) {

        .box{
            width: 220px;
            height: 220px;
            background: #000;
        }
    }

@media all and (orientation:portrait){ /*豎屏，即高>寬*/
    something....
}
 
@media all and (orientation:landscape){ /*橫屏，即高<寬*/
    something....
}

---

<meta name="viewport" content="width=device-width,user-scalable=no,target-densitydpi=medium-dpi" />

主流分辨率

iso: 320 - 480

240320(一般不考虑)、320480、480800(多)、640960(多) 480854 1280720 8001280 10801920

A.页面设置固定宽度320px，margin居中，左右留白用背景填充

B.通过media，根据不同的分辨率去设置不同的样式

C.通过100%、flex或rem等手段，等比例缩放 1rem= 1个html上设置的字体大小

---

一、事件 ：touchstart/touchmove/touchend

二、touchEvent:

touches-当前位于屏幕的所有手指的一个列表；
targetTouches位于当前DOM元素上的手指的一个列表
changedTouches:涉及当前事件的手指的一个列表;

防止有些手機瀏覽器下默認拖動

    document.ontouchmove = function (e) {
        e.preventDefault();
    };

图片切换示例1