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

番茄西红柿发布于2019-04-23 13:17 / 1069人阅读

摘要：原始代码计算字体大小效果原因缩放，导致，去掉缩放的代码就好了。但这个不是解决办法。解决方法一设置高度并采用相对定位采用绝对定位。

原始代码：

<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>

效果：

服务器托管云服务器 rem宽度自适应自适应屏幕 div自适应 asp自适应屏幕代码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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