@media css样式自定义适应屏幕分辨率

@media screen 主要定义在电脑屏幕、手机和平板适配问题。
例如我产品的需求是，显示宽度不超过2560px时，按钮占比占屏幕90%,超过2560px分辨率时，占比91%;这里也可以设置成固定像素，根据需求自定义设置。

/* 不超过2560px显示样式*/
@media screen and (max-width: 2560px) {
  .input_title {
    width: 85%;

  }
}
/*超过2560px显示样式*/
@media screen and (min-width: 2560px) {
  .input_title {
    width: 91%;

  }
}

上面代码要注意的是，如果上面的宽度范围存在交集，而屏幕宽度也在交集中，那么实际会以最后的显示样式呈现。
如:

/* 不超过30000px显示样式*/
@media screen and (max-width: 30000px) {
  .input_title {
    width: 85%;

  }
}
/*超过0px显示样式*/
@media screen and (min-width: 0px) {
  .input_title {
    width: 91%;

  }
}

如果是上述代码，则不超过30000px显示的样式不会被呈现，因为都被后面超过0px的显示样式替换掉了。

而且要注意的是，使用@media里面包裹的需要是根据class来修改样式，实测根据id无法修改样式。即需要使用.class名，而不是#id名；
如果还需要了解@media的其他属性，可以参考该网址。