移动端网页设计vm+rem，和px实现方式对比
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; padding: 15px; margin: 0 auto;}.article { background: #f0f0f0; padding: 15px; margin-bottom: 10px; border-radius: 15px;}.article h3 { font-size: 20px; margin: 0 0 5px 0;}.article p { font-size: 16px; margin: 0;}/* 按钮 */.btn { display: block; width: 300px; height: 50px; margin: 20px auto; font-size: 18px; background-color: #2196F3; color: white; border: none; border-radius: 5px;}</style></head><body><header class=\"banner\">头部 Banner</header><section class=\"carousel\"> <img src=\"https://placehold.co/375x150.png?text=Placeholder+Image\" alt=\"轮播图\"></section><section class=\"features\"> <div class=\"feature\">功能1</div> <div class=\"feature\">功能2</div> <div class=\"feature\">功能3</div> <div class=\"feature\">功能4</div></section><section class=\"articles\"> <div class=\"article\"> <h3>文章标题1</h3> <p>文章摘要内容，固定 px 单位显示</p> </div> <div class=\"article\"> <h3>文章标题2</h3> <p>文章摘要内容，固定 px 单位显示</p> </div></section><button class=\"btn\">立即体验</button></body></html>适配
<!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); /* 100px = 设计稿1rem */}html, body { margin: 0; padding: 0; overflow-x: hidden; /* 防止横向滚动条 */}/* Banner */.banner { width: 3.75rem; /* 固定宽度，等于设计稿宽 */ height: 1.5rem; background-color: #4CAF50; color: white; display: flex; justify-content: center; align-items: center; font-size: .24rem; margin: 0 auto;}/* 轮播图 */.carousel img { width: 3.75rem; height: 1.5rem; display: block; margin: 0 auto;}/* 功能卡片 */.features { display: flex; justify-content: space-around; width: 3.75rem; padding: .2rem 0; margin: 0 auto;}.feature { width: .8rem; height: .8rem; background-color: #FFC107; border-radius: .1rem; display: flex; justify-content: center; align-items: center; font-size: .18rem;}/* 文章列表 */.articles { width: 3.75rem; padding: .15rem; margin: 0 auto;}.article { background: #f0f0f0; padding: .15rem; margin-bottom: .1rem; border-radius: .15rem;}.article h3 { font-size: .2rem; margin: 0 0 .05rem 0;}.article p { font-size: .16rem; margin: 0;}/* 按钮 */.btn { display: block; width: 3rem; height: .5rem; margin: .2rem auto; font-size: .18rem; background-color: #2196F3; color: white; border: none; border-radius: .05rem;}</style></head><body><header class=\"banner\">头部 Banner</header><section class=\"carousel\"> <img src=\"https://placehold.co/375x150.png?text=Placeholder+Image\" alt=\"轮播图\"></section><section class=\"features\"> <div class=\"feature\">功能1</div> <div class=\"feature\">功能2</div> <div class=\"feature\">功能3</div> <div class=\"feature\">功能4</div></section><section class=\"articles\"> <div class=\"article\"> <h3>文章标题1</h3> <p>文章摘要内容，固定 px 单位显示</p> </div> <div class=\"article\"> <h3>文章标题2</h3> <p>文章摘要内容，固定 px 单位显示</p> </div></section><button class=\"btn\">立即体验</button></body></html>
