media媒体查询自适应h5页面

media字体设置

html的默认字体:16px,在使用媒体查询的时候,会按照1rem = 100px来进行换算,按照1rem =100px来进行换算,10/16=0.625,就需要将html的字体大小设置为625%,即可适应多平台字体

html{
font-size: 625%;
}

我们在写代码的时候,肯定不是仅仅是需要字体适应,还有一些其他的样式肯定也是需要适配不同的屏幕的,那么我们就可以根据不同的屏幕写不同的样式,来适配多个设备,如

@media only screen and (min-width:320px) and (max-width:374px) {
body{
background:red;
}
}
@media only screen and (min-width:375px) and (max-width:413px) {
body{ 
background:blue;
}
}
@media only screen and (min-width:414px) and (max-width:767px) {
body{
background:yellow;
}
}
@media only screen and (min-width:768px){
body{
background:green;
}
}

上面代码:当屏幕宽度在320-374之间,背景颜色为红色;375-413之间,背景颜色为蓝色;414-767背景颜色为黄色;768以上背景色为绿色,像这样的方式来进行不同屏幕的适配,直接在页面引入css文件,即可得到相应的效果.

当然我们还可以在引入css文件的时候进行媒体查询的设置

<link rel="stylesheet" type="text/css" media="screen" href