HTML5 的媒体查询用多了好么？

Question

HTML5的媒体查询有哪些优缺点，有的人认为最好不用。但是做页面的时候为了兼容iPhone5和6plus，经常用到啊。谁对此有比较全面的讲解？

Answer 1

手机移动端最好还是用em、%和rem，媒体查询做不到全面兼容，而且维护和开发成本高。

Answer 2

移动端页面添加上下面的meta

<meta name="viewport" content="width=device-width, initial-scale=1" />

如果要禁止用户的缩放，请自行查询文档后添加

然后尽量不要使用px作为单位，除了border-width, outline-width, border-radius等只需要微量单位的属性外，多使用em, %, rem做单位, 尤其是字体。这种处理是不需要媒体查询的，真正用到媒体查询的东西不会太多的，主要是在布局上可能会有些媒体查询的东西存在。

Answer 3

媒体查询配合rem使用。

@media only screen and (min-width: 340px){

  html {

    font-size: 20px !important;

  }

}

@media only screen and (min-width: 401px){

  html {

    font-size: 25px !important;

  }

}

@media only screen and (min-width: 428px){

  html {

    font-size: 26.75px !important;

  }

}

@media only screen and (min-width: 481px){

  html {

    font-size: 30px !important;

  }

}

@media only screen and (min-width: 569px){

  html {

    font-size: 35px !important;

  }

}

@media only screen and (min-width: 641px){

  html {

    font-size: 40px !important;

  }

}

然后html里面的DOM根据html来设定大小，宽度，高度。