@media 媒体查询

@media媒体查询：针对不同的屏幕尺寸设置不同的样式

@media mediatype and(not/only) (media feature){ }

mediatype（媒体类型）:
    all--所有设备，
    print--打印机和打印预览，
    screen--电脑屏幕和平板电脑和只能手机等

and / not / only：
    and多个媒体特征链接到一起且的意思，
    not排除某个媒体，
    only指定某个特定的谋体类型

media feature：
    width--设备的页面可见宽度，
    min-width--最小可见宽度，
    max-width--最大设备可见宽度

当屏幕宽度小于等于439px的时候, body的背景颜色是橙色：
@media screen and (max-width: 439px){ body{ background: orange;} }

当屏幕宽度大于等于440，小于等于 599区间内,body颜色黑色:
@media screen and (min-width: 440px) and (max-width:599){ body{background:black;} }
@media screen and (min-width: 440px) { body{background:black;} } <-简写

当屏幕宽度大于等于600px,改为白色: (大于600会覆盖大于599)
@media screen and (min-width: 600px){ body{background:black;} }

使用媒体查询根据屏幕尺寸 调用不同的css文件(很少用)
<link rel="stylesheet" href="style320.css" media="screen and (min-wdith: 320px)">
<link rel="stylesheet" href="style640.css" media="screen and (min-wdith: 640px)">

@media screen and (min-width: 320px) and (max-width: 750px){
    @media screen and (orientation: portrait) {
        /*手机竖屏 css*/

    }
    @media screen and (orientation: landscape) {
        /*手机横屏 css*/
    }
}