专栏首页Devops专栏移动端布局伸缩、设置div高度等比例缩放

移动端布局伸缩、设置div高度等比例缩放

问题描述

首先写一个移动端布局的div出来看看,示例如下:

随着移动端的屏幕大小,div的布局宽度是设置100%,所以可以跟着变化。但是高度是固定写了10rem的高度,这样是无法随着宽度变化进行等比例变化的。

那么解决这个问题的关键就是,因为高度是使用rem单位设置的,只要随着屏幕的宽度变化,设置html的font-size大小变化,就可以控制高度的变化。

编写JavaScript脚本,控制html的font-size变化

可以看到,随着宽度变化,高度也相应有了变化了。

示例完整代码如下

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Document</title>
    <style>
        html{
            font-size: 20px;
        }

        .box1{
            width: 100%;
            height: 10rem;

            background-color: gold;
            font-size: 14px;
            line-height: 10rem;
            text-align: center;
        }
    </style>
    <script>
        (function(){
            var calc = function(){
                var docElement = document.documentElement;
                var clientWidthValue = docElement.clientWidth > 750 ? 750 : docElement.clientWidth;
                docElement.style.fontSize = 20*(clientWidthValue/375) + 'px';
            }
            calc();
            window.addEventListener('resize',calc);
        })();
    </script>
</head>
<body>
    <div class="box1">移动端高度等比例问题</div>
</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • jquery选择器

    jquery选择器可以快速地选择元素,选择规则和css样式相同,使用length属性判断是否选择成功。

    Devops海洋的渔夫
  • jquery样式操作

    选择器获取的多个元素,获取信息获取的是第一个,比如:$("div").css("width"),获取的是第一个div的width。

    Devops海洋的渔夫
  • jquery 元素节点操作 - 创建节点、插入节点、删除节点

    前面的篇章对于jquery的元素操作大部分是使用html()的方式来操作,这种直接使用字符串创建的方式也是性能最高的。

    Devops海洋的渔夫
  • 两天研习Python基础(六)控制结构

    [1]Python文档 - 真值检验: https://docs.python.org/3/library/stdtypes.html#truth

    王诗翔呀
  • NVIDIA何琨:AI视频处理加速引擎TensorRT及Deepstream介绍

    近日,爱奇艺技术沙龙“多模态视频人物识别的关键技术及应用”成功举办,英伟达开发者社区经理何琨出席并作出精彩分享,以下为分享实录:

    量子位
  • JavaWEB+Ajax实现文件上传

    准备:我们需要找一张绿色或者其它颜色的背景图,放在photo文件夹里就好哈,然后加jar:common-io和commo-fileupload就可以哈

    SmileNicky
  • 【答疑解惑】c语言判断一个数是否为整数

    这个问题在现实中用到的概率还是比较少的,但是小伙伴有此疑问,我们用代码来做做练习 #include<stdio.h> int main(void) { ...

    程序员互动联盟
  • leetcode-258-Add Digits

    chenjx85
  • Python基础语法学习:标识符与保留字

    在编程语言中,我们需要用标识符来代指某个东西,这个东西可以是一个数据,可以是一个函数,一个类,那么与之对应的就是变量名,函数名,类名等概念。

    python学习教程
  • 红黑树真的没你想的那么难

    TreeMap是红黑树的java实现,红黑树能保证增、删、查等基本操作的时间复杂度为O(lgN)。 首先我们来看一张TreeMap的继承体系图:

    我就是马云飞

扫码关注云+社区

领取腾讯云代金券