使用rem和@media screen进行移动端设备屏幕自适应布局

1.在开发中遇到需要和移动端设备屏幕适应调节

废话不多说，直接上码：

/* 进行屏幕的适配 */
/* iphone 6,6s,7,8 750*1334px (375*667pt) */
@media screen and (max-width: 375px) {
  html {
    font-size: 10px;
  }
}

/* iphone 6+,6s+.7+,8+ (414*736pt) */
@media screen and (min-width: 376px) and (max-width: 414px) {
  html {
    font-size: 11.04px;
  }
}

/* 自己的电脑 1920*1080px 屏幕宽度大于等于415px都进行font-size的转换*/
@media screen and (min-width: 415px) {
  html {
    font-size: 11.0666667px;
  }
}

1. 在用rem和media标签做对于不同iphone6、iphone8p的设备进行屏幕适配的时候，所使用的css中媒体扫描中的

min-width：minpx；
max-width：maxpx；

要注意的是:

/* 进行屏幕的适配 */
/* iphone 6,6s,7,8 750*1334px (375*667pt) */
@media screen and (max-width: 375px) {
  html {
    font-size: 10px;
  }
}

/* iphone 6+,6s+.7+,8+ (414*736pt) */
@media screen and (min-width: 375px) and (max-width: 414px) {
  html {
    font-size: 11.04px;
  }
}

如果产生了交集，第一个font-size会被第二个font-size所覆盖，因为取的是闭区间，所以要注意！！

2.在对应所需要写样式的地方使用rem替代px

例如这样：

.monitor {
  margin-left: 0.5rem;
  margin-top: 1rem;
  border: solid 0.1rem black;
  text-align: right;
  background-color: rgba(245, 245, 245);
}