移动端网页设计vm+rem，和px实现方式对比

原创

已于 2025-09-03 07:55:15 修改 · 740 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #javascript

于 2025-09-02 20:00:23 首次发布

vscode安装cssrem插件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>移动端复杂布局示例（px）</title>
<style>
html {
     
     
  font-size: calc(100vw / 375 * 100); /* 1rem = 设计稿100px */
}

html, body {
     
     
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* 防止横向滚动条 */
}
/* Banner */
.banner {
     
     
  width: 375px;         /* 固定宽度，等于设计稿宽 */
  height: 150px;
  background-color: #4CAF50;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  margin: 0 auto;
}

/* 轮播图 */
.carousel img {
     
     
  width: 375px;
  height: 150px;
  display: block;
  margin: 0 auto;
}

/* 功能卡片 */
.features {
     
     
  display: flex;
  justify-content: space-around;
  width: 375px;
  padding: 20px 0;
  margin: 0 auto;
}
.feature {
     
     
  width: 80px;
  height: 80px;
  background-color: #FFC107;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
}

/* 文章列表 */
.articles {
     
     
  width: 375px