根据页面大小调整内容大小

最新推荐文章于 2024-07-31 16:53:56 发布

-lim-

最新推荐文章于 2024-07-31 16:53:56 发布

阅读量2.1k

点赞数

分类专栏：问题解决文章标签： rem em

本文链接：https://blog.csdn.net/keseliugeizuori/article/details/83106178

版权

问题解决专栏收录该内容

8 篇文章 0 订阅

订阅专栏

最近在写页面的过程中发现一个问题，我写的页面放到大屏幕上是可以显示完全的，但是放到小屏幕上就会出现遮盖问题，显示不完全，因此通过大量查询，查到了前端页面中的两个东西可以解决该问题。

第一、em，相对与父元素的长度（em的概念自行查询）

第二、rem，相对与根元素的长度（rem的概念自行查询）

所以本文采用了rem的概念来解决这个问题，具体代码如下：

<script>
    function defaultfont(){
        var sw = $(window).width();//获取屏幕宽度
        var pw = 1280;  //该值为设计图的尺寸
        var f = 100*sw/pw;//做计算
        $('html').css('font-size', f+'px');
        }  
     defaultfont();  //执行函数
     setTimeout(function(){  
            defaultfont();  
     }, 100);
</script>

对空间进行设置如下：

<select class="form-control select-date" id = "select_date_1" style="width:1rem">
    <option value=1>最近7天</option>
    <option value=2>最近30天</option>
    <option value=3>自定义</option>
</select>

其中的style="width:1rem"会随着页面大小而改变自己的宽度。