MUI警务排版页面 使用css3的calc()函数动态计算宽度

fengrui99

原文来自：https://www.frbkw.com/1306/


我们先说下为啥有时候css3的calc()函数动态计算宽度更方便，开局不说话，先来一张图

方式一：grid

[Asm] 纯文本查看 复制代码

<div class="mui-content">
    <div class="mui-row">
        <div class="mui-col-sm-6 mui-col-xs-12">
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">
                    Item 1    
                </a>
            </li>
        </div>
        <div class="mui-col-sm-6 mui-col-xs-12">
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">
                    Item 1
                </a>
            </li>
        </div>
    </div>
</div>

这个代码为案例，解读后就是如果屏幕很多大就排 一行里面2个字段，如果屏幕小就是一行一个。其实grid也是通过%比的方式，那按上面的原型图，一行一个那么量很大。那有人问让它屏幕小的时候也一行两个不久好了嘛，嗯确实可以但是前面说了grid其实也是百分比。具体为啥我看看方式三。


方式二：px为单位
这个简单介绍下如果你适配一个iphone6的屏幕2个div都是设置float：left。 第一个设置300px，第二个设置500px是刚刚好的，那如果屏幕变大了就会出现很大的白边。


方式三：百分比


比如一个长100cm的物体，你30%那就是30cm，如果另外一个物体只有60cm，那么你的30%也会随着宽度变化而变化


方式四：rem


em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸， 任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位。
如果以上方式都无法决解你的问题，或者无法满足你的项目需求就试试css3的calc()函数动态计算宽度简单的理解为：一行2个物体，你把其中一个物体给固定死，在由总长度减去固定死的宽度，剩下的位置就算随着屏幕大小变化而变化 也不会导致样式出错。举个例子

[Asm] 纯文本查看 复制代码

<div>
        <div class="mui-pull-left">被告人数:</div>
        <div class="mui-pull-left" style="width: calc(100% - 80px);border: #0062CC 1px solid;">吟枫瑞</div>
</div>

calc（）函数可以用来对数值属性执行四则运算。比如，<length>，<frequency>，<angle>，<time>，<number> 或者 <integer 数据类型。

[Asm] 纯文本查看 复制代码

.ferr {
    width: calc(50vmax + 3rem);
    padding: calc(1vw + 1em);
    transform: rotate( calc(1turn + 28deg) );
    background: hsl(100, calc(3 * 20%), 40%);
    font-size: calc(50vw / 3);
}

fengrui99

laoou 发表于 2019-1-23 16:16
谢谢@Thanks，吾爱破解论坛有你更精彩！

大兄弟 评分错了 这个是评论

1359420

感谢分享~

fengrui99

1359420 发表于 2019-1-24 12:54
感谢分享~

哈哈哈 感谢观看帖子