不是我知道,如果在直线上的CSS。你可以结合jQuery来实现这一点。 jQuery的一个例子:
$(document).ready(function() {
box_size();
$(window).resize(function() {
box_size();
});
function box_size() {
var window_width = $(window).width();
$('.box').removeClass('break-one').removeClass('break-two').removeClass('break-three');
if (window_width <= 1000 && window_width > 900) {
$('.box').addClass('break-one');
}
else if (window_width <= 900 && window_width > 800) {
$('.box').addClass('break-two');
}
else if (window_width <= 800) {
$('.box').addClass('break-three');
}
}
});
该函数被调用两次。一次用于加载时检查大小,并在浏览器重新调整大小时再次加载。
的CSS:
.box {
color: black;
}
.box.break-one {
color: red;
}
.box.break-two {
color: blue;
}
.box.break-three {
color: yellow;
}