如何在CSS中制作离散宽度？

Question

以下是JS中的示例：http://jsfiddle.net/0gbd58r2/

var WIDTH = 18;
var sizeUpdate = function() {
    this.style.width = ((document.body.clientWidth / WIDTH) | 0) * WIDTH + 'px';
}

var lorem = document.getElementById('lorem');

var updater = sizeUpdate.bind(lorem);
updater();

onresize = updater;

是否可以在CSS 中实现这种行为，而不会为每个可能的宽度生成很多@media查询？