自适应布局百分比和定值的计算方案

关于自适应布局,大家肯定会碰到百分比和px计算的问题,当然css3的计算函数calc可以解决,但是也存在兼容性问题,如下:

计算方式:

    .content {
            width: 200px;
            height: 200px;
            background-color: #ccc;
            display: inline-block;
            vertical-align: middle;
            width:calc(100% - 20px);
        }

浏览器兼容性:

自适应布局百分比和定值的计算方案

以下是对于不兼容此函数的写法:

   .content {
            width: 200px;
            height: 200px;
            background-color: #ccc;
            display: inline-block;
            vertical-align: middle;
            box-sizing: border-box;
            border-left: 20px solid;
        }

这样,两种解决方案!!!!!!!!!!!!!!!

转载于:https://www.cnblogs.com/Brose/p/css3_calc_hack.html

自适应布局百分比和定值的计算方案

相关推荐