css媒体查询、rem，适配不同分辨率手机(分享)

1. 常见的手机分辨率

320px、360px、400px、500px、640px、720px、750px等，当然还有很多，我们不可能给每一款手机设置一个不同的样式，这个时候就需要用到媒体查询了

2. 媒体查询的基本介绍

/* 语法规范 */
@media mediatype and|not|only (media feature){
  css-code;
}
/*
mediatype：媒体类型
and|not|only：关键字
media feature：媒体特征，必须有小括号包含
css-code;：css样式
	这里就不一一介绍了
*/

3.配合less达到适配不同分辨率手机

/* 
  这里使用css预处理语言声明一个变量 
  在less中可以声明变量，加减乘除，除法最好带一个括号
*/
/* 
  这里分成了十等份，一般对应750的设计稿，给html设置字体表示1rem就等于75px，
  同理500的设计稿，1rem就等于50px
  我们先拿750的设计稿来说，当我想给一个盒子设置宽高都为750px
那么我想让它达到响应式的效果，我可以给它宽度都设置10rem
这样屏幕宽度为750时他的宽高就等于，10rem * 75还是750
要是如果屏幕变成了500那也没有关系，10rem * 50就变成500了

  这里为什么可以这样，因为我在媒体查询把所有不同的分辨率都分成了十份
  这样我在设置px的时候就直接可以用(原px / 每份的像素单位)(最后单位rem)
  还是不明白的话可以试着想一下，我们拿着750的设计稿，先分成十份，然后html的字体就是75px
  我想写一个75px的字体大小，我就直接可以写成1rem，怎么来的 
  (原px / 每份的像素单位)(最后单位rem)
  (75px / 75px)(最后单位rem)

  补充：rem是根据html标签的fontsize来决定的，html的fontsize是24px，那么1rem就等于24px
*/
@xy-width: 10;

@media (min-width:0) {
  html {
    font-size: (320px / @xy-width);
  }
}

@media (min-width:320px) {
  html {
    font-size: (320px / @xy-width);
  }
}

@media (min-width:360px) {
  html {
    font-size: (360px / @xy-width);
  }
}

@media (min-width:400px) {
  html {
    font-size: (400px / @xy-width);
  }
}

@media (min-width:500px) {
  html {
    font-size: (500px / @xy-width);
  }
}

@media (min-width:640px) {
  html {
    font-size: (640px / @xy-width);
  }
}

@media (width:720px) {
  html {
    font-size: (720px / @xy-width);
  }
}

@media (min-width:750px) {
  html {
    font-size: (750px / @xy-width);
  }
}