小米商城rem布局

标签：flex height rem font 小米 display 商城 size

1.px、em、rem区别介绍

px

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

px特点

1. IE无法调整那些使用px作为单位的字体大小；
2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

EM特点

1. em的值并不是固定的；
2. em会继承父级元素的字体大小。

REM

rem是CSS3新增的一个相对单位（root em，根em）。rem与em的区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。例子：p {font-size:14px; font-size:.875rem;}

在移动端通常使用媒体查询+rem控制大小；

1rem = 页面中html的font-size值；

对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可。

对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。

2.小米商城rem项目思路

假设把页面尺寸为750的设计稿划分为10等份，那么1个格子等于750/10 = 75px；
所以，如果在此750设计稿中使用rem单位，则需要等比例还原设计稿，也要等比例切割将页面划分为10等份，即给html设置font-size值为75px，即1rem = 75px = 0.0133rem；
VScode中px与rem换算插件【cssrem】，基础默认字体大小是16px，转换需自行配置（见下图），设置完之后重启vscode，然后输入数值px就能自动换算成rem了；

假设能自动获取当前屏幕宽度winW，依旧把winW划分为10等份，把winW/10的数值设置为html的font-size值；
根据rem自动换算成html的font-size值的特点，就能实现不同屏幕下等比例还原设计稿；
自动获取屏幕js代码如下：

function setFont() {
    var winW = document.documentElement.clientWidth
    var htmlFont = winW / 10;
    document.getElementsByTagName('html')[0].style.fontSize = htmlFont + 'px';
}
setFont();
window.onresize = function () {
    setFont();
}

3.正文

小米商城移动端参考图

2.index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城</title>
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/myFlexble.js"></script>
</head>
<body>
    <header>
          <!--顶部广告图-->
    <section class="top-add">
        <a href="#">
            <img src="./images/top-add.png" alt="">
        </a>
    </section>
    <!--搜索栏-->
    <section class="search">
        <div class="logo">
            <img src="./images/logo.png" alt="">
        </div>
        <div class="search-link">
            <a href="#">
                <i class="iconfont icon-sousuo"></i>
                <span>搜索商品名称</span>
            </a>
        </div>
        <div class="user">
            <a href="#">
                <i class="iconfont icon-dibutubiao_wode"></i>
            </a>
        </div>
    </section>
    <!--导航栏-->
    <nav class="navlist">
        <ul>
            <li><a href="#" class="active">推荐</a></li>
            <li><a href="#">手机</a></li>
            <li><a href="#">智能</a></li>
            <li><a href="#">电视</a></li>
            <li><a href="#">笔记本</a></li>
            <li><a href="#">家电</a></li>
        </ul>
        <div class="dropdown">
            <a href="#">
                <i class="iconfont icon-down"></i>
            </a>
        </div>
    </nav>
    </header>
    <!--轮播大图-->
    <section class="banner">
        <div>
            <a href="#">
                <img src="./images/banner1.jpg" alt="">
            </a>
        </div>
    </section>
    <!--分类部分-->
    <div>
        <ul class="category">
            <li><a href="#"><img src="./images/nav1.png" alt=""></a></li>
            <li><a href="#"><img src="./images/nav2.webp" alt=""></a></li>
            <li><a href="#"><img src="./images/nav3.webp" alt=""></a></li>
            <li><a href="#"><img src="./images/nav4.webp" alt=""></a></li>
            <li><a href="#"><img src="./images/nav5.webp" alt=""></a></li>
            <li><a href="#"><img src="./images/nav6.webp" alt=""></a></li>
            <li><a href="#"><img src="./images/nav7.png" alt=""></a></li>
            <li><a href="#"><img src="./images/nav8.png" alt=""></a></li>
            <li><a href="#"><img src="./images/nav9.webp" alt=""></a></li>
            <li><a href="#"><img src="./images/nav10.png" alt=""></a></li>
        </ul>
    </div>
    <!--主页内容-->
    <div class="main">
        <div class="leftbox">
            <a href="#">
                <img src="./images/f1_l.webp" alt="">
            </a>
        </div>
        <div class="rightbox">
            <ul>
                <li>
                    <a href="#">
                     <img src="./images/f1_c.webp" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">               
                     <img src="./images/f1_r.webp" alt="">
                    </a>
                </li>
            </ul>
            
        </div>
    </div>
    <!--底部bottom-->
    <nav class="bottom-nav">
        <ul>
            <li>
                <a href="#" class="active">
                    <i class="iconfont icon-shouye"></i>
                    <span>首页</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="iconfont icon-icon04"></i>
                    <span>分类</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="iconfont icon-xingqiu"></i>
                    <span>星球</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="iconfont icon-gouwuche"></i>
                    <span>购物车</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="iconfont icon-dibutubiao_wode"></i>
                    <span>我的</span>
                </a>
            </li>
        </ul>
    </nav>


</body>
</html>

3.inde.css

@import url('./reset.less');
@import url('../font/iconfont.css');

//top-add
.top-add {
    font-size: 0;
}

@search-height: .88rem;

.search {
    line-height: 0;
    display: flex;
    padding: .1467rem;
    background-color: #f2f2f2;

    .logo {
        height: @search-height;
        width: 1.3867rem;
        padding: .1867rem .36rem .2533rem;
    }

    .search-link {
        flex: 1;
        height: @search-height;

        a {
            display: flex;
            align-items: center;
            height: 100%;
            border: .0133rem solid #e5e5e5;
            background-color: azure;

            span {
                font-size: .4rem;
                margin-left: .2667rem;
            }

            .iconfont {
                margin-left: .2667rem;
            }
        }
    }

    .user {
        width: 1.3867rem;
        height: @search-height;

        a {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;

            .iconfont {
                font-size: .48rem;
            }

        }
    }

}

.navlist {
    display: flex;

    ul {
        display: flex;

        li {
            padding: 0 .36rem;
            font-size: .3467rem;
            line-height: .7733rem;
            color: #3333;

            a {
                display: block;
                height: 100%;

                // font-size: .48rem;
                &.active {
                    color: #ed5b00;
                    border-bottom: 0.0533rem solid #ed5b00;
                }
            }
        }
    }

    .dropdown {
        flex: 1;
        // display: flex;

        a {
            display: flex;
            height: 100%;
            justify-content: center;
            align-items: center;

            .iconfont {
                font-family: "iconfont" !important;
                font-size: .48rem;
                font-style: normal;
            }
        }

    }
}


.category {
    display: flex;
    flex-wrap: wrap;

    li {
        width: 20%;
    }
}

.main {
    display: flex;

    .leftbox {
        display: flex;

        img {
            display: flex;
        }
    }

    .rightbox {
        display: flex;

        ul {
            display: flex;
        }

    }

}

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;

    ul {
        display: flex;
        justify-content: space-around;

        li {
            a {
                height: 1.3867rem;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                &.active {
                    color: #ed5b00;
                }

                .iconfont {
                    font-size: .48rem;
                }

                font-size: 0.48rem;

                span {
                    font-size: .2933rem;

                }
            }
        }
    }
}

4.其他文件/完整代码包demo

https://download.csdn.net/download/weixin_53832924/89567507

标签：flex,height,rem,font,小米,display,商城,size
From： https://blog.csdn.net/weixin_53832924/article/details/140612329

1.px、em、rem区别介绍

px

px特点

EM特点

REM

2.小米商城rem项目思路

3.正文

相关文章

赞助商

阅读排行