MUI警务排版页面 使用css3的calc()函数动态计算宽度
原文来自：https://www.frbkw.com/1306/我们先说下为啥有时候css3的calc()函数动态计算宽度更方便，开局不说话，先来一张图
https://frbkw.com//wp-center/uploads/2019/01/2019.1.22.png
方式一：grid
<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是刚刚好的，那如果屏幕变大了就会出现很大的白边。
https://frbkw.com//wp-center/uploads/2019/01/QQ20190122103440.png
方式三：百分比
比如一个长100cm的物体，你30%那就是30cm，如果另外一个物体只有60cm，那么你的30%也会随着宽度变化而变化
https://frbkw.com//wp-center/uploads/2019/01/QQ20190122103714.png
方式四：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个物体，你把其中一个物体给固定死，在由总长度减去固定死的宽度，剩下的位置就算随着屏幕大小变化而变化 也不会导致样式出错。举个例子 <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 数据类型。.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);
}
laoou 发表于 2019-1-23 16:16
谢谢@Thanks，吾爱破解论坛有你更精彩！
{:1_907:}大兄弟 评分错了 这个是评论 {:1_918:}感谢分享~ 1359420 发表于 2019-1-24 12:54
感谢分享~
哈哈哈 感谢观看帖子
页:
[1]