移动端布局之动态rem

时间 2019-11-08

标签移动布局动态 rem 栏目无线繁體版

原文原文链接

动态rem

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

px 像素css

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

rem 全称root em 是根元素（html)的font-sizechrome

vh 全称viewport height 100vh == 视口高度浏览器

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

由于网页的默认font-size：16px 因此1rem默认是16pxchrome 的最小字体像素默认是12px字体

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

2. 移动端的布局

移动端的布局通常就两种设计

一是总体缩放
二是百分比布局

先说总体缩放

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

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

为了看到效果，要将<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>
复制代码

但这种总体缩放的用户体验并很差，因此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>
复制代码

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

可是百分比布局有个缺点，宽度和高度不能作任何关联

能够看上面的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>
复制代码

效果入图

能够看到宽度和高度都能按百分比变化了，可是咱们会发现一个很麻烦的东西，设计师给咱们的设计稿，咱们却必须把每一个元素的像素单位换算为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，若是要转载，请注明出处，

若是以为写的不错，请点个赞吧