移动端单位自适应的两种方式-阿里云开发者社区

之前考虑过，怎么实现移动端随着屏幕尺寸的不同，高度，宽度，文字大小等能够自动适应，今天主要说2种，一种是结合js和css的方式，另一种是rem和vw混合使用实现的方式。

0.前置知识

rem: 根据html和body的根元素的字体大小做对比，显示文字的比例单位

em: 根据父级元素的字体大小对比，显示文字的比例单位，这个不推荐使用，因为如果父级元素没有设置字体大小，得一步一步向上寻找。

vw: 视口的宽度（ 100vw= 视口的高度屏幕尺寸显示的宽度）

vh: 视口的高度（100vh = 屏幕尺寸显示的高度）

但是注意: 100vw不等于100%，同理，100vh也不等于100%。没有滚动条的时候： 100vw == 100%，有滚动条时，100vw包含滚动条，则是100% 刨除滚动条剩余的空间，此时100vw > 100%.100vh > 100%.

px to rem小插件，这个插件在vscode和idea中都有，可以自动根据根元素的字体px转换成对应的rem值，不用手动计算。

完整案例:实现个足球朋友圈的小案例。

1: js方式自动设置根元素文字大小，实现单位自适应。

关键思路和代码:

<script>
        //320是iphone4的css尺寸，这个尺寸取决于你的设计稿，css中根据20px进行换成对应的rem，根据窗口大小自动计算了根元素的fontSize，那css中就可以用多少rem来动态计算了。
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 320 * 20 + 'px';
 </script>

<!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="font/iconfont.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        html, body {
            height: 100%;
        }
        body {
            display: flex;
            flex-direction: column;
        }
        header {
            height: 2.2rem;
            background: green;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        header div {
            width: 3rem;
            height: 1.25rem;
            line-height: 1.25rem;
            text-align: center;
            font-size: 0.6rem;
        }
        header div:nth-child(1) {
            border-radius: 0.6rem 0 0 0.6rem;
            background: #63d985;
            color: #fff;
        }
        header div:nth-child(2) {
            border-radius: 0 0.6rem 0.6rem 0;
            background: #3dd066;
            color: #a9e4b4;
        }
        section {
            flex: 1;
            overflow: auto;
        }
        section ul {
            position: sticky;
            top: 0;
            display: flex;
            justify-content: space-around;
            background: #fff;
        }
        section ul li {
            flex: 1;
            text-align: center;
            height: 1.75rem;
            line-height: 1.75rem;
            border-bottom: 0.05rem solid #d9d9d9;
            color: #8c8c8c;
            font-size: 0.7rem;
        }
        section ul li:hover {
            border-bottom: 0.1rem solid green;
            color: #14bf4d;
        }
        section .list {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        section .list > div {
            width: 49%;
            margin-top: 0.2rem;
            border: 0.05rem solid gray;
            display: flex;
            flex-direction: column;
            justify-content: center;
            /*align-items: center;*/
        }
        section .list > div img{
            width: 100%;
            height: 100%;
            flex: 1;
        }
        section .list > div p{
            height: 1.5rem;
            line-height: 1.5rem;
            font-size: 0.6rem;
            text-indent: 0.5rem;
        }
        footer {
            height: 2.2rem;
            background: #fff;
            color: #d5d547;
        }
        footer ul{
            display: flex;
            justify-content: space-around;
            height: 100%;
        }
        footer ul li{
            height: 100%;
            flex: 1;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }
        footer ul li:hover{
            color: #08ca43;
        }
        footer ul li i{
            height: 1.05rem;
            line-height: 1.05rem;
            font-size: 0.6rem !important;
        }
        footer ul li span{
            height: 0.85rem;
            line-height: 0.85rem;
            font-size: 0.6rem;
        }
        footer ul li:nth-child(3){
            position: relative;
        }
        footer ul li:nth-child(3) i{
            height: 2.5rem;
            width: 2.5rem;
            border: 0.05rem solid #dadada;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            margin-left: -1.25rem ;
            top: -0.4rem;
            font-size: 1.5rem !important;
            text-align: center;
            line-height: 2.5rem;
            background: #fff;
        }
    </style>
    <script>
        //320是iphone4的css尺寸，这个尺寸取决于你的设计稿
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 320 * 20 + 'px';
    </script>
</head>
<body>
<header>
    <div>热点</div>
    <div>关注</div>
</header>
<section>
    <ul>
        <li>足球现场</li>
        <li>足球生活</li>
        <li>足球美女</li>
    </ul>
    <div class="list">
        <div>
            <img src="images/1.png" alt="">
            <p>大家好大家好</p>
        </div>
        <div>
            <img src="images/1.png" alt="">
            <p>大家好大家好</p>
        </div>
        <div>
            <img src="images/1.png" alt="">
            <p>大家好大家好</p>
        </div>
        <div>
            <img src="images/1.png" alt="">
            <p>大家好大家好</p>
        </div>
        <div>
            <img src="images/1.png" alt="">
            <p>大家好大家好</p>
        </div>
        <div>
            <img src="images/1.png" alt="">
            <p>大家好大家好</p>
        </div>
        <div>
            <img src="images/1.png" alt="">
            <p>大家好大家好</p>
        </div>
    </div>
</section>
<footer>
    <ul>
        <li>
            <i class="iconfont icon-a-tongxunludianhuabu"></i>
            <span>首页</span>
        </li>
        <li>
            <i class="iconfont icon-tongxun"></i>
            <span>发现</span>
        </li>
        <li>
            <i class="iconfont icon-paizhao"></i>
        </li>
        <li>
            <i class="iconfont icon-Account"></i>
            <span>我的</span>
        </li>
        <li>
            <i class="iconfont icon-forward"></i>
            <span>退出</span>
        </li>
    </ul>
</footer>
</body>
</html>

2: vw版

思路: 先根据设计稿算出根元素的fontSize为多少vw，因为vw是自适应，这样根元素的字体就是动态变的，那其他css中的都是xxrem也会自动变化。

关键代码:

/*根据下面的设计稿尺寸，算出 html的fontsize是多少个vw，其余的还是用rem就行*/
          /*iphone4*/
         /*320px == 100 vw*/
         /*16px  === ? 5 vw*/
  html, body {
            height: 100%;
            font-size: 5vw;
 }

全部代码:

<!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="font/iconfont.css">
    <style>
        思路:
        /*根据下面的设计稿尺寸，算出 html的fontsize是多少个vw，其余的还是用rem就行*/
          /*iphone4*/
         /*320px == 100 vw*/
         /*16px  === ? 5 vw*/
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        html, body {
            height: 100%;
            font-size: 5vw;
        }
        body {
            display: flex;
            flex-direction: column;
        }
        header {
            height: 2.75rem;
            background: green;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        header div {
            width: 3.75rem;
            height: 1.5625rem;
            line-height: 1.5625rem;
            text-align: center;
            font-size: 0.75rem;
        }
        header div:nth-child(1) {
            border-radius: 0.75rem 0 0 0.75rem;
            background: #63d985;
            color: #fff;
        }
        header div:nth-child(2) {
            border-radius: 0 0.75rem 0.75rem 0;
            background: #3dd066;
            color: #a9e4b4;
        }
        section {
            flex: 1;
            overflow: auto;
        }
        section ul {
            position: sticky;
            top: 0;
            display: flex;
            justify-content: space-around;
            background: #fff;
        }
        section ul li {
            flex: 1;
            text-align: center;
            height: 2.1875rem;
            line-height: 2.1875rem;
            border-bottom: 0.0625rem solid #d9d9d9;
            color: #8c8c8c;
            font-size: 0.875rem;
        }
        section ul li:hover {
            border-bottom: 0.125rem solid green;
            color: #14bf4d;
        }
        section .list {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        section .list > div {
            width: 49%;
            margin-top: 0.25rem;
            border: 0.0625rem solid gray;
            display: flex;
            flex-direction: column;
            justify-content: center;
            /*align-items: center;*/
        }
        section .list > div img{
            width: 100%;
            height: 100%;
            flex: 1;
        }
        section .list > div p{
            height: 1.875rem;
            line-height: 1.875rem;
            font-size: 0.75rem;
            text-indent: 0.625rem;
        }
        footer {
            height: 2.75rem;
            background: #fff;
            color: #d5d547;
        }
        footer ul{
            display: flex;
            justify-content: space-around;
            height: 100%;
        }
        footer ul li{
            height: 100%;
            flex: 1;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }
        footer ul li:hover{
            color: #08ca43;
        }
        footer ul li i{
            height: 1.3125rem;
            line-height: 1.3125rem;
            font-size: 1rem !important;
        }
        footer ul li span{
            height: 1.0625rem;
            line-height: 1.0625rem;
            font-size: 0.75rem;
        }
        footer ul li:nth-child(3){
            position: relative;
        }
        footer ul li:nth-child(3) i{
            height: 3.125rem;
            width: 3.125rem;
            border: 0.0625rem solid #dadada;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            margin-left: -1.5625rem ;
            top: -0.5rem;
            font-size: 1.875rem !important;
            text-align: center;
            line-height: 3.125rem;
            background: #fff;
        }
    </style>
</head>
<body>
<header>
    <div>热点</div>
    <div>关注</div>
</header>
<section>
    <ul>
        <li>足球现场</li>
        <li>足球生活</li>
        <li>足球美女</li>
    </ul>
    <div class="list">
        <div>
            <img src="images/1.png" alt="">
            <p>大家好大家好</p>
        </div>
        <div>
            <img src="images/1.png" alt="">
            <p>大家好大家好</p>
        </div>
        <div>
            <img src="images/1.png" alt="">
            <p>大家好大家好</p>
        </div>
        <div>
            <img src="images/1.png" alt="">
            <p>大家好大家好</p>
        </div>
        <div>
            <img src="images/1.png" alt="">
            <p>大家好大家好</p>
        </div>
        <div>
            <img src="images/1.png" alt="">
            <p>大家好大家好</p>
        </div>
        <div>
            <img src="images/1.png" alt="">
            <p>大家好大家好</p>
        </div>
    </div>
</section>
<footer>
    <ul>
        <li>
            <i class="iconfont icon-a-tongxunludianhuabu"></i>
            <span>首页</span>
        </li>
        <li>
            <i class="iconfont icon-tongxun"></i>
            <span>发现</span>
        </li>
        <li>
            <i class="iconfont icon-paizhao"></i>
        </li>
        <li>
            <i class="iconfont icon-Account"></i>
            <span>我的</span>
        </li>
        <li>
            <i class="iconfont icon-forward"></i>
            <span>退出</span>
        </li>
    </ul>
</footer>
</body>
</html>

完

移动端单位自适应的两种方式

0.前置知识

1: js方式自动设置根元素文字大小，实现单位自适应。

2: vw版

热门文章

最新文章

相关电子书