rem手机端

最新推荐文章于 2024-10-02 05:39:15 发布

betterIatethanne

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量322

点赞数 11

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/betterIatethanne/article/details/135214445

版权

文章详细描述了一个使用rem单位进行移动端页面布局的HTML和CSS示例，展示了如何通过媒体查询和相对单位适应不同屏幕尺寸。内容涉及头部、内容区域、用户模块和底部的各个UI组件设计。

摘要由CSDN通过智能技术生成

rem:

   <script>

        document.documentElement.style.fontSize=innerWidth/20+'px'

   </script>

// document.documentElement.style.fontSize=innerWidth/20+'px'

// document.documentElement=HTML

// .style=修改的HTML样式

// .fontSize=修改HTML的字体样式

// .innerWidth=设计稿的宽度

// 640/20=32

// 结果：1rem=32px

rem手机端页面练习

div部分：

 <!-- 头部 -->
    <div class="header">
        <!-- 顶部 -->
        <div class="header-top">
            <li><img src="img/xx_03.png" alt=""></li>
            <li><img src="img/ddd_03.png" alt=""></li>
        </div>
        <!-- 背景图片 -->
        <div class="header-banner">
            <!-- 中间图片 -->
            <div class="header-banner-box">
                <img src="img/hiuyuan_03.png" alt="">
                <p>娃哈哈</p>
            </div>
        </div>
    </div>
    <!-- 内容 -->
    <div class="content">
        <!-- 我的余额1 -->
        <div class="content-left1">
            <!-- 线 -->
            <div class="content-left1-box">
                <p>152.00</p>
                <p>我的余额</p>
            </div>
        </div>
        <!-- 我的余额2 -->
        <div class="content-left2">
            <!-- 线 -->
            <div class="content-left2-box">
                <p>152.00</p>
                <p>我的优惠券</p>
            </div>
        </div>
        <!-- 我的余额3 -->
        <div class="content-left3">
            <!-- 线 -->
            <div class="content-left3-box">
                <p>152.00</p>
                <p>我的积分</p>
            </div>
        </div>
    </div>
    <!-- 我的订单 -->
    <div class="user">
        <li><img src="img/y.png" alt=""></li>
        <li>我的订单</li>
        <li><img src="img/fh.png" alt=""></li>
    </div>
    <!-- 我的优惠券 -->
    <div class="user-yh">
        <!-- 1 -->
        <div class="user-yh-top1">
            <li><img src="img/c1.png" alt=""></li>
            <li>我的优惠券</li>
            <li><img src="img/fh.png" alt=""></li>
        </div>
        <!-- 2 -->
        <div class="user-yh-top2">
            <li><img src="img/c2.png" alt=""></li>
            <li>积分商城</li>
            <li><img src="img/fh.png" alt=""></li>
        </div>
        <!-- 3 -->
        <div class="user-yh-top3">
            <li><img src="img/c3.png" alt=""></li>
            <li>活动中心</li>
            <li><img src="img/fh.png" alt=""></li>
        </div>
    </div>
    <!-- 常见问题 -->
    <div class="user">
        <li><img src="img/c4.png" alt=""></li>
        <li>常见问题</li>
        <li><img src="img/fh.png" alt=""></li>
    </div>
    <!-- 底部 -->
    <div class="footer">
        <!-- 图片 -->
        <li><img src="img/f1.png" alt=""></li>
        <li><img src="img/f2.png" alt=""></li>
        <li><img src="img/f3.png" alt=""></li>
    </div>

css样式：

* {
    margin: 0;
    padding: 0;
    list-style: none;
}

html {
    background-color: #eeeded;
}

/* 头部 */
.header {
    width: 25rem;
    height: 15.3667rem;
    /* background-color: aquamarine; */
}

/* 顶部 */
.header-top {
    width: 25rem;
    height: 2.9rem;
    background-color: #393a3e;
}

/* 图片 X */
.header-top li:nth-child(1) img {
    width: 1.1333rem;
    height: 1.1667rem;
    margin-left: .9333rem;
    margin-top: 1.1rem;
    float: left;
}

/* 图片 三个点 */
.header-top li:nth-child(2) img {
    float: right;
    width: .3667rem;
    height: 1.4rem;
    margin-right: 1.7333rem;
    margin-top: 1.1rem;
}

/* 背景图片 */
.header-banner {
    width: 25rem;
    height: 12.5rem;
    /* background-color: khaki; */
    background: url(../img/nav-1_10.gif);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 25rem 12.4667rem;
}

/* 中间图片 */
.header-banner-box {
    width: 7.8667rem;
    height: 12.5rem;
    /* background-color: lavenderblush; */
    margin: auto;
    background-image: url(../img/tx_03.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 7.4rem 7.2667rem;
}

.header-banner-box img {
    width: 4.3rem;
    height: 2.5333rem;
    margin-top: 2rem;
}

.header-banner-box p {
    color: #fff;
    font-size: 1.154rem;
    letter-spacing: .1667rem;
    font-weight: 700;
    line-height: 12.5rem;
    text-align: center;
}

/* 内容  */
.content {
    width: 25rem;
    height: 4.1333rem;
    /* background-color: khaki; */
}

/* 我的余额 */
.content-left1 {
    width: 8rem;
    height: 4.1333rem;
    background-color: #fff;
    float: left;
}

/* 线 */
.content-left1-box {
    width: 7.7667rem;
    height: 2.8rem;
    border-right: 1px solid #ccc;
    /* background-color: red; */
    margin-top: .6667rem;
}

/* 152.00 */
.content-left1-box p:nth-child(1) {
    color: #9e9e9e;
    font-size: .9137rem;
    text-align: center;
}

/* 我的余额 */
.content-left1-box p:nth-child(2) {
    font-size: .9617rem;
    color: #9e9e9e;
    text-align: center;
}

/* 我的优惠券 */
.content-left2 {
    width: 8.88rem;
    height: 4.1333rem;
    background-color: #fff;
    float: left;
}

/* 线 */
.content-left2-box {
    width: 8.8333rem;
    height: 2.8rem;
    border-right: 1px solid #ccc;
    /* background-color: red; */
    margin-top: .6667rem;
}

/* 152.00 */
.content-left2-box p:nth-child(1) {
    color: #9e9e9e;
    font-size: .9137rem;
    text-align: center;
}

/* 我的余额 */
.content-left2-box p:nth-child(2) {
    font-size: .9617rem;
    color: #9e9e9e;
    text-align: center;
}

/* 我的积分 */
.content-left3 {
    width: 8.1rem;
    height: 4.1333rem;
    background-color: #fff;
    float: right;
}

/* 线 */
.content-left3-box {
    width: 7.7667rem;
    height: 2.8rem;
    /* border-right: 2px solid #ccc; */
    /* background-color: red; */
    margin-top: .6667rem;
}

/* 152.00 */
.content-left3-box p:nth-child(1) {
    color: #9e9e9e;
    font-size: .9137rem;
    text-align: center;
}

/* 我的余额 */
.content-left3-box p:nth-child(2) {
    font-size: .9617rem;
    color: #9e9e9e;
    text-align: center;
}

/* 我的订单 */
.user {
    width: 25rem;
    height: 3.1333rem;
    background-color: #fff;
    margin-top: .4667rem;
}

.user li:nth-child(1) img {
    width: 1.4333rem;
    height: 1.5rem;
    float: left;
    margin-left: 1.7667rem;
    margin-top: .7667rem;
}

.user li:nth-child(2) {
    color: #959595;
    font-size: 1.106rem;
    line-height: 1.5rem;
    float: left;
    margin-left: 1.4333rem;
    margin-top: .7667rem;
}

.user li:nth-child(3) img {
    width: .6667rem;
    height: 1rem;
    float: right;
    margin-top: .8667rem;
    margin-right: 1.4667rem;
}

/* 我的优惠券 */
.user-yh {
    width: 25rem;
    height: 8.2rem;
    /* background-color: red; */
    margin-top: .8333rem;
}

/* 1 */
.user-yh-top1 {
    width: 25rem;
    height: 2.7rem;
    background-color: #fff;
    border-bottom: 1px solid #f9f8f8;
}

.user-yh-top1 li:nth-child(1) img {
    width: 1.4333rem;
    height: 1.5rem;
    float: left;
    margin-left: 1.7667rem;
    margin-top: .7667rem;
}

.user-yh-top1 li:nth-child(2) {
    color: #959595;
    font-size: 1.106rem;
    line-height: 1.5rem;
    float: left;
    margin-left: 1.4333rem;
    margin-top: .7667rem;
}

.user-yh-top1 li:nth-child(3) img {
    width: .6667rem;
    height: 1rem;
    float: right;
    margin-top: .8667rem;
    margin-right: 1.4667rem;
}

/* 2 */
.user-yh-top2 {
    width: 25rem;
    height: 2.7rem;
    background-color: #fff;
    border-bottom: 1px solid #f9f8f8;
}

.user-yh-top2 li:nth-child(1) img {
    width: 1.4333rem;
    height: 1.5rem;
    float: left;
    margin-left: 1.7667rem;
    margin-top: .7667rem;
}

.user-yh-top2 li:nth-child(2) {
    color: #959595;
    font-size: 1.106rem;
    line-height: 1.5rem;
    float: left;
    margin-left: 1.4333rem;
    margin-top: .7667rem;
}

.user-yh-top2 li:nth-child(3) img {
    width: .6667rem;
    height: 1rem;
    float: right;
    margin-top: .8667rem;
    margin-right: 1.4667rem;
}

/* 3 */
.user-yh-top3 {
    width: 25rem;
    height: 2.7rem;
    background-color: #fff;
}

.user-yh-top3 li:nth-child(1) img {
    width: 1.4333rem;
    height: 1.5rem;
    float: left;
    margin-left: 1.7667rem;
    margin-top: .7667rem;
}

.user-yh-top3 li:nth-child(2) {
    color: #959595;
    font-size: 1.106rem;
    line-height: 1.5rem;
    float: left;
    margin-left: 1.4333rem;
    margin-top: .7667rem;
}

.user-yh-top3 li:nth-child(3) img {
    width: .6667rem;
    height: 1rem;
    float: right;
    margin-top: .8667rem;
    margin-right: 1.4667rem;
}

/* 底部 */
.footer {
    width: 25rem;
    height: 3.3333rem;
    background-color:#fff;
    bottom: 0;
    position: absolute;
}
/* 图片1 */
.footer li:nth-child(1) img{
    width: 2.7333rem;
    height: 2.1rem;
    float: left;
    margin-left:2.8333rem;
    margin-top: .6333rem;
}
/* 图片2 */
.footer li:nth-child(2) img{
    width:2.1333rem;
    height:2.2333rem;
    float: left;
    margin-left:6.1333rem;
    margin-top: .6333rem;
}
/* 图片3 */
.footer li:nth-child(3) img{
    width:2.3333rem;
    height:2.1333rem;
    float:right;
    margin-right:2.8333rem;
    margin-top: .6333rem;
}