移动端布局之动态rem

1,587 阅读4分钟

动态rem

1. 首先我们先介绍当下的长度单位

px 像素

em 一个M的宽度 / 一个汉字的宽度 1em == 自身的font-size

rem 全称root em 是根元素(html)的font-size

vh 全称viewport height 100vh == 视口高度

vw 全程 viewport width 100vw == 视口宽度

因为网页的默认font-size:16px 所以1rem默认是16pxchrome 的最小字体像素默认是12px

一个元素在没有设置font-size的情况下会去继承父元素的font-size

2. 移动端的布局

移动端的布局一般就两种

  • 一是整体缩放
  • 二是百分比布局

先说整体缩放

整体缩放,其实就是将pc端的网页缩小到手机端屏幕能看到网页全貌的大小

苹果手机刚出来时就是使用这种布局,苹果公司研究发现世界上大多数的网页宽度是980px,然而苹果手机的宽度像素是320px,所以苹果手机的浏览器用320像素的屏幕宽度去模拟980px的宽度,实现了整体缩放

为了看到效果,要将<meta name="viewport">这一部分删除

 <style>
        div{
            width:980px;
            margin:0 auto;
            background:#f0f0f0;
        }
        ul{
            list-style:none;
        }
        li{
            float:left;
            margin-left:10px;    
        }
        clearfix::after{
            content:"";
            display:block;
            clear:both;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>选项1</li>
            <li>选项2</li>
            <li>选项3</li>
            <li>选项4</li>
            <li>选项5</li>
            <li>选项6</li>
        </ul>
    </div>
</body>

1558342560097

但这种整体缩放的用户体验并不好,所以pass,我们来讲百分比布局

百分比布局

//百分比布局
<style>
        .child{
            background-color:#ccc;
            text-align:center;
            width:40%;
            margin:10px 5%;
            float:left;
        }
        .clearfix::after{
            content:"";
            display:block;
            clear:both;
        }
    </style>
</head>
<body>
    <div class="parent clearfix">
        <div class="child">选项1</div>
        <div class="child">选项2</div>
        <div class="child">选项3</div>
        <div class="child">选项4</div>
    </div>
</body>

录制_2019_05_20_16_59_09_286

可以看到百分比布局能自动适应屏幕宽度。

但是百分比布局有个缺点,宽度和高度不能做任何关联

可以看上面的gif图,宽度一直变长,然而高度没有变化

为了让选项方块的高度是宽度的一半,实现该效果我们需要知道屏幕的宽度,再来确定选项的宽度和高度

这里可以使用vw,但vw的兼容性比较差,我们可以使用rem来代替vw

首先rem是以html的font-size为基准的,所以我们可以让html的font-size==pageWidth

<script>
	let pageWidth = window.innerWidth;
    document.write('<style>html{font-size:'+ pageWidth/10 +'px}</style>')
</script>

为了更好的使用rem,这里1rem等于屏幕宽度的10分之1。注意不能做到1rem==屏幕的百分之1。因为浏览器的最小font-size是12px;

按如上改动代码

<style>
.child{
            background-color:#ccc;
            text-align:center;
            width:4rem;
            height:2rem;
            margin:10px 0.05rem;
            float:left;
            line-height:2rem;
        }
        .clearfix::after{
            content:"";
            display:block;
            clear:both;

        }
</style>
</head>
<body>
    <div class="parent clearfix">
        <div class="child">选项1</div>
        <div class="child">选项2</div>
        <div class="child">选项3</div>
        <div class="child">选项4</div>
    </div>
</body>

效果入图

录制_2019_05_20_17_20_55_326

可以看到宽度和高度都能按百分比变化了,但是我们会发现一个很麻烦的东西,设计师给我们的设计稿,我们却必须把每个元素的像素单位换算为rem。这里我们就要scss来换算px了

3.scss动态换算px

@function pxToRem($px){
    @return $px/$designWidth*10+rem;//10是把整个屏幕分为10rem
}
$designWidth:320;//设计稿宽度
.child{
    background-color:#ccc;
    text-align:center;
    width:pxToRem(128);//4rem;
    height:pxToRem(64);//2rem;
    margin: 10px pxToRem(1.6);
    float:left;
    line-height:pxToRem(64);
}
.clearfix::after{
    content:"";
    display:block;
    clear:both;

}

结语

因为本人水平有限,如果有错漏的地方,还请看官多多指正

本文作者胡志武,写于2019/5/20,如果要转载,请注明出处,

如果觉得写的不错, 请点个赞吧