使用rem編寫自適應屏幕網頁造成div被span撐高的解決辦法

番茄西紅柿發布于2019-04-23 13:17 / 1189人閱讀

摘要：原始代碼計算字體大小效果原因縮放，導致，去掉縮放的代碼就好了。但這個不是解決辦法。解決方法一設置高度并采用相對定位采用絕對定位。

原始代碼：

<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" style="float:left">
    <div class="price-div" >
        <span class="price-unit">￥span>
        <span  class="price-number">42span>
    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等內聯元素設置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>

效果：

云服務器 GPU云服務器 rem寬度自適應自適應屏幕 div自適應 asp自適應屏幕代碼

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1665.html

構建自適應的手機頁面

摘要：從事開發好多年，但是手機頁面開發較晚，所以最開始的時候，為了做微信應用的開發，各種餓補，但是為了將設計稿精準的適配在各種尺寸的手機上還是太坑，所以找了些資料后，借鑒了一些成熟的網站，分享出來，歡迎拍磚。從事PC Web開發好多年，但是手機頁面開發較晚，所以最開始的時候，為了做微信應用的開發，各種餓補，但是為了將設計稿精準的適配在各種尺寸的手機上還是太坑，所以找了些資料后，借鑒了一些成...

itvincent 2019-08-21 10:30 評論0 收藏0
淺談web自適應

摘要：本篇文章分享了一些處理多屏幕自適應的經驗，希望有益于各位。該寬度自適應在新的時代有了新的方法，隨著彈性布局的普及，它經常被的伸縮性布局方式替代，變得越來越彈性十足。轉自：http://www.cnblogs.com/consta... 前言隨著移動設備的普及，移動web在前端工程師們的工作中占有越來越重要的位置。移動設備更新速度頻繁，手機廠商繁多，導致的問題是每一臺機器的屏幕寬度和...

kid143 2019-08-02 15:57 評論0 收藏0
淺談web自適應

摘要：本篇文章分享了一些處理多屏幕自適應的經驗，希望有益于各位。該寬度自適應在新的時代有了新的方法，隨著彈性布局的普及，它經常被的伸縮性布局方式替代，變得越來越彈性十足。轉自：http://www.cnblogs.com/consta... 前言隨著移動設備的普及，移動web在前端工程師們的工作中占有越來越重要的位置。移動設備更新速度頻繁，手機廠商繁多，導致的問題是每一臺機器的屏幕寬度和...

dack 2019-08-21 11:56 評論0 收藏0
淺談web自適應

摘要：本篇文章分享了一些處理多屏幕自適應的經驗，希望有益于各位。該寬度自適應在新的時代有了新的方法，隨著彈性布局的普及，它經常被的伸縮性布局方式替代，變得越來越彈性十足。轉自：http://www.cnblogs.com/consta... 前言隨著移動設備的普及，移動web在前端工程師們的工作中占有越來越重要的位置。移動設備更新速度頻繁，手機廠商繁多，導致的問題是每一臺機器的屏幕寬度和...

sshe 2019-08-29 13:10 評論0 收藏0
CSS9:動態 REM-手機專用的自適應方案

摘要：一定要強制自己用命令行，強制自己學英語，強制自己看文檔。只有這三條都做了，才有可能成為前端水平的程序員。設計師的設計稿寬度需要統一那么相應得，這時會將自動變成寬度為的情況下這樣就無需在手動換算的值了。 CSS9:動態 REM-手機專用的自適應方案動態 REM是手機專用,是如何適配所有手機的方案,不是響應式方案,例如 : taobao.com 是專門的PC端m.taobao.com 是...

ityouknow 2019-08-02 10:52 評論0 收藏0