MUI警务排版页面MUI自适应利用calc()函数动态计算宽度

MUI警务排版页面MUI自适应利用calc()函数动态计算宽度

原先在我们设计界面的时候通过使用px或者%来计算宽度,在这个无奇不有的死妈的屏幕分辨率下,就会出现各种让程序员各种上吊,自杀,跳楼等等问题。这也有可能是前端人员的技术沉淀不够,适配也是前端最讨厌的一个问题。css3的calc()函数动态计算宽度确实不错

枫瑞还是有一个故事的哈哈,面对着年头的手机我只想想说买的那么贵,处理器还那么低,你那拿一点钱放在屏幕上就不行吗,只知道广告?(大家懂的)一个快6寸的屏幕,dpi300多一点点,这TM是放大镜吧?

回到主题,我们在适配移动端的时候 一般采用4种方式

1.grid(栅格)
2.PX单位

3.%单位
4.rem

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

MUI警务排版页面 使用css3的calc()函数动态计算宽度
MUI警务排版页面 使用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是刚刚好的,那如果屏幕变大了就会出现很大的白边。

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

 

方式三:百分比

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

MUI警务排版页面MUI自适应利用calc()函数动态计算宽度

方式四: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()函数可以用来对数值属性执行四则运算。比如,&lt;length>&lt;frequency>&lt;angle>&lt;time>&lt;number> 或者 &lt;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) );
}

 

(1)
枫瑞博客枫瑞博客
上一篇 2019-01-15 15:43
下一篇 2019-02-12 20:42

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注