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

Random=_=

已于 2022-10-27 09:50:46 修改

阅读量2.2k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css css3 前端

于 2022-10-27 09:49:15 首次发布

本文链接：https://blog.youkuaiyun.com/Tian_std_scu/article/details/127545243

css 专栏收录该内容

2 篇文章

订阅专栏

博客主要围绕移动端设备屏幕适配展开，提到在开发中遇到需与移动端屏幕适配调节的情况，可使用rem替代px进行样式编写，还举例说明了在用rem和media标签对不同iphone设备进行屏幕适配时css中媒体扫描的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;
  }
}

在用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);
}