MUI警务排版页面MUI自适应利用calc()函数动态计算宽度
原先在我们设计界面的时候通过使用px或者%来计算宽度,在这个无奇不有的死妈的屏幕分辨率下,就会出现各种让程序员各种上吊,自杀,跳楼等等问题。这也有可能是前端人员的技术沉淀不够,适配也是前端最讨厌的一个问题。css3的calc()函数动态计算宽度确实不错
枫瑞还是有一个故事的哈哈,面对着年头的手机我只想想说买的那么贵,处理器还那么低,你那拿一点钱放在屏幕上就不行吗,只知道广告?(大家懂的)一个快6寸的屏幕,dpi300多一点点,这TM是放大镜吧?
回到主题,我们在适配移动端的时候 一般采用4种方式
1.grid(栅格)
2.PX单位
3.%单位
4.rem
我们先说下为啥有时候css3的calc()函数动态计算宽度更方便,开局不说话,先来一张图
方式一: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是刚刚好的,那如果屏幕变大了就会出现很大的白边。
方式三:百分比
比如一个长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个物体,你把其中一个物体给固定死,在由总长度减去固定死的宽度,剩下的位置就算随着屏幕大小变化而变化 也不会导致样式出错。
举个例子 记住calc(100% - 80px);减前后需要空格
<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
数据类型。
.foo {
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);
}
同时calc()函数可以嵌套。在函数里边,会被视为简单的括号表达式,如下例所示。
.foo {
width: calc( 100% / calc(100px * 2) );
}