移动端rem布局

移动端rem布局

在了解移动端rem布局之前我们先搞清楚rem是什么，px em rem之间有什么区别。

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

EM
em，相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。一般浏览器默认字体尺寸大小为16px，这时，1em=16px。

REM
rem是CSS3新增的一个相对单位（root em，根em），使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。通过它可以做到只修改根元素就成比例地调整所有字体大小。移动端设备的尺寸大小不是固定的，因此rem特别适合移动端布局。我们只需要改变html标签font-size的大小，就可以适配不同的设备。如何做到font-size动态化呢？在这里我们通过vw来实现。

vw （vw是尺寸单位）
vw -> view width
vh -> view height
它们是相对单位：表示把屏幕自动分成了100vw宽和100vh高
vw/vh：把屏幕分为100份，1vw等于屏幕宽的1%
假设屏幕是375px -> 100vw -> 1vw == 3.75px
假设屏幕是414px -> 100vw -> 1vw == 4.14px
iphone6 -> html的font-size -> 100px
1vw == 3.75px ->多少个vw？== 100px -> 26666.7vw
iphone6 plus -> html的font-size
1vw ==4.14px -> 266666.7*4.14px -> 110.4px

接下来我们做个实例，通过REM布局实现：

这个是我们要实现的效果图，首先先把定义html文字大小

html{ font-size:26.666667vw;}

这里要注意一点，因为我们默认是在ipnone6设备下进行设置，当设备改变的时候，文字大小也会变化，所以要给body重置font-size

body{ font-size:0.16rem;}

图片整体可以分为六部分，利用弹性布局来实现纵向排列，通过 flex-direction:colum 设置主轴为纵向,进行布局。

这里有个小技巧，利用VS Code中的“px to rem”插件可以快速的进行px与rem的换算，在红框内设置100，1rem=100px，选中需要换算的代码，快捷键Alt+Z就可以转换了。

以下是代码：
CSS代码：

 <style>
        *{ margin:0; padding:0;}
        html{ font-size:26.666667vw;}
        body{ font-size:0.16rem;}
        ul{ list-style: none;}
        a{ text-decoration: none;}
        img{ display: block;}
        .clear:after{ content:""; display: block; clear:both;}

        #main{display: flex; flex-direction: column; height: 100vh;}
        
        #header{ color: white; height: 0.44rem; background: #02d1c5; text-align: center; line-height: 0.44rem; font-size: 0.18rem;}
       
        #serch{ height: 0.66rem;}
        #serch div span{ font-size: 0.16rem; position: relative; left: 20%; top: 50%;}
        #serch div input{ border: none; background: #f3f3f3; width: 2.5rem; height: 0.25rem; margin-top: 0.2rem; margin-left: 0.49rem; border-radius: 0.05rem;}

        #pic{ position: relative; overflow: hidden; height: 1.5rem;}
        #pic .pic-case{ height: 100%;}
        #pic .pic-case img{ height: 100%;}
        #pic .icon{width: 0.36rem; height: 0.05rem;}
        #pic .icon ul{ position: absolute; left: 1.71rem; bottom: 0.15rem; }
        #pic .icon ul li{float: left; width: 0.02rem; height: 0.02rem; border: 0.01rem white solid; border-radius: 50%; margin-right: 0.06rem;}
        #pic .icon ul .active{background: white;}

        #content{ height: 0.82rem; display: flex; justify-content: space-evenly; align-items: center; }
        #content div p{ font-size: 0.16rem; color: #02d1c5;line-height: 0.5rem; text-indent: 0.79rem;}
        #content div:first-of-type{ width: 1.65rem; height: 0.5rem; background: url(./arrow1.png) no-repeat 0.25rem 0.125rem; background-size: 0.36rem 0.25rem; box-shadow: 0.02rem 0.02rem 0.1rem rgba(0, 0, 0, .3);border-radius: 0.05rem;}
        #content div:last-of-type{  width: 1.65rem; height: 0.5rem; background: url(./arrow2.png) no-repeat 0.25rem 0.125rem; background-size: 0.36rem 0.25rem; box-shadow: 0.02rem 0.02rem 0.1rem rgba(0, 0, 0, .3);border-radius: 0.05rem;}

        #case{ flex:1; overflow: auto;}
        #case  p{ height: 0.54rem; font-size: 0.16rem; color: #666666; text-indent: 0.35rem; line-height: 0.54rem;}
        #case div{ width: 3.45rem; height: 1.25rem; background-position:center center; background-size:cover; margin-bottom:0.15rem ;  border-radius: 0.4rem; overflow: hidden; margin-left: 0.15rem;}
        #case div span{ display: block; font-size: 0.2rem; color: white; text-align: center; line-height: 1.25rem; background: rgba(0, 0, 0, .3); }

        #footer{ height: 0.49rem; background: #f7f7f7; }
        #footer .footer-nav { justify-content: space-around; display: flex; }
        #footer .footer-nav .active a{color: #04d1c5; }
        #footer .footer-nav div a{ color: #666666;}
        #footer .footer-nav span{ font-size: 0.25rem;}
        #footer .footer-nav p{ font-size: 0.14rem;}
        #footer .footer-nav div:nth-of-type(3){width: 0.5rem; height: 0.5rem;  font-size: 0.21rem; border-radius:50%; background: #04d1c5; text-align: center; line-height: 0.5rem; position: relative; top:-0.2rem;}
        #footer .footer-nav div:nth-of-type(3) a{color: white;}
    </style>

<div id="main">
        <div id="header">
            <p>菜谱推荐</p>
        </div>

        <div id="serch">
            <div>
                <span class="iconfont icon-sousuo"></span>
                <input type="text">
            </div>
        </div>

        <div id="pic">
            <div class="pic-case"><img src="./pic1.png" alt=""></div>
            <div class="icon">
                <ul class="clear">
                    <li class="active"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>

        <div id="content">
            <div>
                <p>三餐推荐</p>
            </div>
            <div>
                <p>食物库</p>
            </div>
        </div>

        <div id="case">
            <p>精品好菜</p>
            <div style="background: url(./pic2.png);">
                <span>金枪鱼的幻想曲</span>
            </div>
            <div style="background: url(./pic3.png);">
                <span>早餐的诱惑</span>
            </div>
            <div style="background: url(./pic4.png);">
                <span>进击的鸡小胸</span>
            </div>
        </div>

        <div id="footer">
            <div class="footer-nav">
                <div>
                    <a href="#">
                        <span class="iconfont icon-tubiao115"></span>
                        <p>主页</p>
                    </a>
                </div>
                <div class="active">
                    <a href="#" >
                        <span class="iconfont icon-caidan"></span>
                        <p>食谱</p>
                    </a>
                </div>
                <div>
                    <a href="#">
                        <span class="iconfont icon-jiahao"></span>
                    </a>
                </div>
                <div>
                    <a href="#">
                        <span class="iconfont icon-faxian"></span>
                        <p>发现</p>
                    </a>
                </div>
                <div>
                    <a href="#">
                        <span class="iconfont icon-mine"></span>
                        <p>我的</p>
                    </a>
                </div>
            </div>
        </div>
    </div>

在iphone6/7/8下的宽度为为375px

在iphone 6/7/8 plus下的宽度为414px

这样就实现了rem布局