rem布局，能等比例缩放的布局

最新推荐文章于 2023-12-12 14:57:05 发布

原创最新推荐文章于 2023-12-12 14:57:05 发布 · 916 阅读

1 ·

CC 4.0 BY-SA版权

本文通过一个简单的移动端案例，介绍了如何利用rem单位和媒体查询实现页面元素的等比例缩放布局。通过设置不同屏幕宽度下html的font-size，然后以rem为单位设置元素的尺寸，确保在不同设备上保持一致的比例。

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

html如下（这是一个简单的移动端案例）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <link rel="stylesheet" href="less/index.css" type="text/css">
    <link rel="stylesheet" href="../lib/font-awesome/css/font-awesome.css">
    <script type="text/javascript" src="../js/less.js"></script>
</head>
<body>
<!--版心-->
<div class="container">
    <!--顶部通栏-->
    <div class="sn_topBar">
        <a href="" class="icon_category"></a>
        <form action="">
            <span class="icon_search"></span>
            <input type="search" placeholder="60寸电视免费拿">

        </form>
        <a href="#" class="icon_cart"></a>

    </div>
    <!--轮播图-->
    <div class="sn_banner">
        <ul>
            <li><a href=""><img src="../images/banner08.jpg" alt=""></a></li>
            <li><a href=""><img src="../images/banner01.jpg" alt=""></a></li>
            <li><a href=""><img src="../images/banner02.jpg" alt=""></a></li>
            <li><a href=""><img src="../images/banner03.jpg" alt=""></a></li>
            <li><a href=""><img src="../images/banner04.jpg" alt=""></a></li>
            <li><a href=""><img src="../images/banner05.jpg" alt=""></a></li>
            <li><a href=""><img src="../images/banner06.jpg" alt=""></a></li>
            <li><a href=""><img src="../images/banner07.jpg" alt=""></a></li>
            <li><a href=""><img src="../images/banner08.jpg" alt=""></a></li>
            <li><a href=""><img src="../images/banner01.jpg" alt=""></a></li>
        </ul>
        <ul>
            <li class="now"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <!--tab选项-->
    <div class="sn_tabs">
        <div class="tabsT">
            <div class="tabsT1">
                <img src="../images/nav01.png" alt="">
                <p>分类</p>
            </div>
            <div class="tabsT1">
                <img src="../images/nav02.png" alt="">
                <p>分类</p>
            </div>
            <div class="tabsT1">
                <img src="../images/nav03.png" alt="">
                <p>分类</p>
            </div>
            <div class="tabsT1">
                <img src="../images/nav04.png" alt="">
                <p>分类</p>
            </div>
            <div class="tabsT1">
                <img src="../images/nav05.png" alt="">
                <p>分类</p>
            </div>
        </div>
        <div class="tabsT">
            <div class="tabsT1">
                <img src="../images/nav01.png" alt="">
                <p>分类</p>
            </div>
            <div class="tabsT1">
                <img src="../images/nav02.png" alt="">
                <p>分类</p>
            </div>
            <div class="tabsT1">
                <img src="../images/nav03.png" alt="">
                <p>分类</p>
            </div>
            <div class="tabsT1">
                <img src="../images/nav04.png" alt="">
                <p>分类</p>
            </div>
            <div class="tabsT1">
                <img src="../images/nav05.png" alt="">
                <p>分类</p>
            </div>
        </div>
    </div>
    <!--底部标签页-->
    <div class="sn_footer">
        <ul>
            <li>
                <a href="javascript:;"><i class="fa fa-home"></i></a>
                <p>首页</p>
            </li>
            <li>
                <a href="javascript:;"><i class="fa fa-reorder"></i></a>
                <p>分类</p>
            </li>
            <li>
                <a href="javascript:;"><i class="fa fa-file-text-o"></i></a>
                <p>必抢清单</p>
            </li>
            <li>
                <a href="javascript:;"><i class="fa fa-user"></i></a>
                <p>我的易购</p>
            </li>
            <li>
                <a href="javascript:;"><i class="fa fa-suitcase"></i></a>
                <p>新手大礼包</p>
            </li>
        </ul>
    </div>


</div>
</body>
</html>

css如下
@charset “UTF-8”;
@media (min-width: 320px) {
html {
font-size: 42.66666667px;
}
}
@media (min-width: 360px) {
html {
font-size: 48px;
}
}
@media (min-width: 375px) {
html {
font-size: 50px;
}
}
@media (min-width: 384px) {
html {
font-size: 51.2px;
}
}
@media (min-width: 400px) {
html {
font-size: 53.33333333px;
}
}
@media (min-width: 414px) {
html {
font-size: 55.2px;
}
}
@media (min-width: 424px) {
html {
font-size: 56.53333333px;
}
}
@media (min-width: 480px) {
html {
font-size: 64px;
}
}
@media (min-width: 540px) {
html {
font-size: 72px;
}
}
@media (min-width: 640px) {
html {
font-size: 85.33333333px;
}
}
@media (min-width: 720px) {
html {
font-size: 96px;
}
}
@media (min-width: 750px) {
html {
font-size: 100px;
}
}
/reset css/
*,
*::before,
::after {
/所有的标签和伪元素都选中/
margin: 0;
padding: 0;
/防止内容溢出,不出现滚动条.为移动端常用布局/
box-sizing: border-box;
-webkit-box-sizing: border-box;
/点击高亮效果的清除/
tap-highlight-color: transparent;
-webkit-tap-highlight-color: transparent;
}
body {
font-size: 14px;
font-family: “Microsoft YaHei”, sans-serif;
/移动端默认的字体/
color: #333;
}
ul,
ol {
list-style: none;
}
a {
text-decoration: none;
color: #333;
}
input,
textarea {
border: none;
outline: none;
/不允许改变尺寸/
resize: none;
/元素的外观 none指没有任何样式/
-webkit-appearance: none;
}
/common css/
.f_left {
float: left;
}
.f_right {
float: right;
}
.clearFix::before,
.clearFix::after {
content: “”;
display: block;
visibility: hidden;
height: 0;
line-height: 0;
clear: both;
}
.container {
max-width: 750px;
min-width: 320px;
width: 100%;
margin: 0 auto;
position: relative;
padding-top: 0.9rem;
padding-bottom: 1rem;
}
.sn_topBar {
width: 100%;
height: 0.9rem;
background: #fabc09;
position: fixed;
top: 0;
left: 0;
z-index: 100;
}
.sn_topBar a {
position: absolute;
top: 0;
width: 0.9rem;
height: 0.9rem;
}
.sn_topBar a.icon_category {
left: 0;
background: url("…/…/images/icon_category.png") no-repeat center / 0.44rem 0.7rem;
}
.sn_topBar a.icon_cart {
right: 0;
background: url("…/…/images/icon_cart.png") no-repeat center / 0.63rem 0.68rem;
}
.sn_topBar form {
width: 100%;
padding: 0 0.9rem;
position: relative;
}
.sn_topBar form .icon_search {
width: 0.3rem;
height: 0.3rem;
position: absolute;
left: 1rem;
top: 0.3rem;
background: url("…/…/images/icon_search.png") no-repeat center / 0.27rem 0.28rem;
}
.sn_topBar form input {
width: 100%;
height: 0.6rem;
margin-top: 0.15rem;
padding-left: 0.5rem;
font-size: 0.24rem;
background: rgba(255, 255, 255, 0.3);
border-radius: 0.05rem;
}
.sn_banner {
width: 100%;
overflow: hidden;
position: relative;
}
.sn_banner ul:first-child {
width: 1000%;
transform: translateX(-10%);
}
.sn_banner ul:first-child li {
width: 10%;
float: left;
}
.sn_banner ul:first-child li a {
display: block;
width: 100%;
}
.sn_banner ul:first-child li a img {
display: block;
width: 100%;
}
.sn_banner ul:last-child {
position: absolute;
right: 0.2rem;
bottom: 0.2rem;
}
.sn_banner ul:last-child li {
margin-left: 0.12rem;
width: 0.12rem;
height: 0.12rem;
border-radius: 50%;
background-color: #fff;
float: left;
}
.sn_banner ul:last-child li.now {
background: #fabc09;
}
.sn_tabs {
width: 100%;
overflow: hidden;
}
.sn_tabs .tabsT {
width: 100%;
}
.sn_tabs .tabsT .tabsT1 {
width: 20%;
float: left;
margin-top: 10px;
}
.sn_tabs .tabsT .tabsT1 img {
width: 1.1rem;
height: 1.1rem;
display: block;
margin: 0 auto;
}
.sn_tabs .tabsT .tabsT1 p {
font-size: 0.16rem;
text-align: center;
margin-bottom: 10px;
}
.sn_footer {
width: 100%;
height: 1rem;
position: fixed;
border-top: 1px solid #ccc;
bottom: 0;
left: 0;
background-color: white;
}
.sn_footer ul li {
width: 20%;
height: 100%;
float: left;
text-align: center;
}
.sn_footer ul li a i {
margin-top: 0.15rem;
}
.sn_footer ul li a i:before {
font-size: 0.35rem;
}
.sn_footer ul li p {
text-align: center;
font-size: 0.16rem;
}
/# sourceMappingURL=index.css.map */