书写移动端技术栈，媒体查询

媒体查询

CSS3新增的属性，@media查询，你可以根据针对不同设备类型以及设别的不同特性定义不同的样式。

用于针对响应式网页，和移动端的书写，在书写代码的时候不可能根据不同的设备大小书写不同的代码，所以有了媒体查询，根据所检测的媒体大小自定匹配样式。而移动端也是同理，ipad和手机的屏幕就不同，各种手机大小也不一因此媒体查询实用性更强。

响应式布局：PC端样式

大屏幕版心： 1200px

中等大小版心： 970px

小屏幕版心： 750px

语法

@media mediatype and (expressions) and (expressions)...{
    css-Code;
}

medistype: 设备类型；

expressions: 设备特性；可以使用and连接条件

例如：

@media screen (max-width:768){
    html{
        font-size:20px;
    }
}

最大宽度：max-width(可以理解为小于等于)

最小宽度：min-width（可以理解为大于）

之间可以用and连接可以理解为一个区间

例如：

@media screen and (min-width:992px) and (max-width:1200px){
    body{
        background-color:springgreen;
    }
}

基本上常用的就是查询设备屏幕，当然也有查询别的设备的如speech(屏幕阅读器发生设备)

补充：写移动端代码单位换算成rem,有个神奇的数字18.75(适配就是用它来算出来的)，我这边也有个已经做好的总结，包含了大部分的移动端的适配可以直接拿走。

/* 兼容适配： */


/* 280 */

@media screen and (min-width:280px) {
    html {
        font-size: 14.93333333333333px;
    }
}


/* 360 */

@media screen and (min-width:360px) {
    html {
        font-size: 19.2px;
    }
}


/* 375 */

@media screen and (min-width:375px) {
    html {
        font-size: 20px;
    }
}


/* 390 */

@media screen and (min-width:390px) {
    html {
        font-size: 20.8px;
    }
}


/* 393 */

@media screen and (min-width:393px) {
    html {
        font-size: 20.96px;
    }
}


/* 412 */

@media screen and (min-width:412px) {
    html {
        font-size: 21.97333333333333px;
    }
}


/* 540 */

@media screen and (min-width:540px) {
    html {
        font-size: 28.8px;
    }
}


/* 768 */

@media screen and (min-width:768px) {
    html {
        font-size: 40.96px;
    }
}


/* 820 */

@media screen and (min-width:820px) {
    html {
        font-size: 43.73333333333333px;
    }
}


/* 912 */

@media screen and (min-width:912px) {
    html {
        font-size: 48.64px;
    }
}


/* 1024 */

@media screen and (min-width:1024px) {
    html {
        font-size: 54.61333333333333px;
    }
}


/* 1280 */

@media screen and (min-width:1280px) {
    html {
        font-size: 68.26666666666667px;
    }
}