當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

使用rem编写自适应屏幕网页造成div被span撑高的解决办法

發(fā)布時間：2023/12/13 综合教程 18 生活家

生活随笔收集整理的這篇文章主要介紹了使用rem编写自适应屏幕网页造成div被span撑高的解决办法小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

原始代碼：

<html>
<head>
    <meta charset="utf-8">
    <meta content="ie=edge" http-equiv="x-ua-compatible">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
</head>    
<style type="text/css">
    #content{
        width:7.2rem
    }

    .price-div{
      background-color:yellow;
    }

    .price-div span{
      background-color:green;
    }    

    .price-unit{
        font-size:0.25rem;
    }

    .price-number{
        font-size:0.31rem;
    }
</style>
<body>
<div id="content">
    <div class="price-div" >
        <span class="price-unit">￥</span>
        <span  class="price-number">42</span>
    </div>
</div>

<script type="text/javascript">
    //計算字體大小
    var calculateFontSize = function () {
        var BASE_FONT_SIZE = 100;

        var docEl = document.documentElement,
                clientWidth = docEl.clientWidth;
        if (!clientWidth) return;
        docEl.style.fontSize = BASE_FONT_SIZE * (clientWidth / 720) + 'px';

    };
    calculateFontSize();

    // Abort if browser does not support addEventListener
    if (document.addEventListener) {
        var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
        window.addEventListener(resizeEvt, calculateFontSize, false);
        document.addEventListener('DOMContentLoaded', calculateFontSize, false);
    }

</script>
</body>
</html>

效果：

原因：

rem縮放，導致，去掉縮放的js代碼就好了。但這個不是解決辦法。

解決方法一：

div設置高度并采用相對定位,span采用絕對定位。

<style type="text/css">
    #content{
        width:7.2rem
    }

    .price-div{
      background-color:yellow;
      height:0.4rem;
      line-height:0.4rem;
      position:relative;
    }

    .price-div span{
      background-color:green;
    }    

    .price-unit{
        font-size:0.25rem;
        position:absolute;
        top:0rem;
        left:0.2rem;
    }

    .price-number{
        font-size:0.31rem;
        position:absolute;
        top:0rem;
        left:0.5rem;
    }
</style>

效果：

解決方法二：

div設置高度，span等內(nèi)聯(lián)元素設置vertical-align為top。

<style type="text/css">
    #content{
        width:7.2rem
    }

    .price-div{
      background-color:yellow;
      height:0.4rem;
      line-height:0.4rem;
    }

    .price-div span{
      background-color:green;
    }    

    .price-unit{
        font-size:0.25rem;
        vertical-align:top;
    }

    .price-number{
        font-size:0.31rem;
        vertical-align:top;
    }
</style>

效果：

總結(jié)

以上是生活随笔為你收集整理的使用rem编写自适应屏幕网页造成div被span撑高的解决办法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： iOS开发常见错误
下一篇： OpenCV circle() 画圆函数