自适应布局百分比和定值的计算方案
关于自适应布局,大家肯定会碰到百分比和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; }
这样,两种解决方案!!!!!!!!!!!!!!!