我对 javascript 和 jquery 比较陌生。我决定推出并维护自己的解决方案，而不是使用基础或引导程序。我不太担心单个组件，因为我之前已经构建了大部分组件，但是响应式行/列对我来说有点担心。
这段代码直接设置 col1-col-12 和 mob1-mob12 的百分比（12 列，mob 仅可移动）。
我有一些我正在玩的 CSS 与此密切相关。我对它的功能比较满意，但我真的不知道如何使用任何其他数据结构或编程方法进一步压缩我的解决方案。
提前感谢您的任何建议：
$(document).ready(function(){
var colElements = ".row, .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12";
var col1 = "8%";
var col2 = "16%";
var col3 = "25%";
var col4 = "33%";
var col5 = "41%";
var col6 = "50%";
var col7 = "58%";
var col8 = "66%";
var col9 = "75%";
var col10 = "83%";
var col11 = "91%";
var col12 = "100%";
function convertToPercent(n){
var output = n.toString();
output = output.concat("%");
return output
}
function responsiveAdjust(){
$("body").find(colElements).each(function(){
if($(this).hasClass("row")){
$(this).width("100%");}
if ($("body").width() > 499){
if($(this).hasClass("col1")){
$(this).width(col1);
}
else if($(this).hasClass("col2")){
$(this).width(col2);
}
else if($(this).hasClass("col3")){
$(this).width(col3);
}
else if($(this).hasClass("col4")){
$(this).width(col4);
}
else if($(this).hasClass("col5")){
$(this).width(col5);
}
else if($(this).hasClass("col6")){
$(this).width(col6);
}
else if($(this).hasClass("col7")){
$(this).width(col7);
}
else if($(this).hasClass("col8")){
$(this).width(col8);
}
else if($(this).hasClass("col9")){
$(this).width(col9);
}
else if($(this).hasClass("col10")){
$(this).width(col10);
}
else if($(this).hasClass("col11")){
$(this).width(col11);
}
else if($(this).hasClass("col12")){
$(this).width(col12);
}}
if($("body").width() < 500){
if($(this).hasClass("mob1")){
$(this).width(col1);
}
else if($(this).hasClass("mob2")){
$(this).width(col2);
}
else if($(this).hasClass("mob3")){
$(this).width(col3);
}
else if($(this).hasClass("mob4")){
$(this).width(col4);
}
else if($(this).hasClass("mob5")){
$(this).width(col5);
}
else if($(this).hasClass("mob6")){
$(this).width(col6);
}
else if($(this).hasClass("mob7")){
$(this).width(col7);
}
else if($(this).hasClass("mob8")){
$(this).width(col8);
}
else if($(this).hasClass("mob9")){
$(this).width(col9);
}
else if($(this).hasClass("mob10")){
$(this).width(col10);
}
else if($(this).hasClass("mob11")){
$(this).width(col11);
}
else if($(this).hasClass("mob12")){
$(this).width(col12);
}else if($(this).hasClass("col1")){
$(this).width(col1);
}
else if($(this).hasClass("col2")){
$(this).width(col2);
}
else if($(this).hasClass("col3")){
$(this).width(col3);
}
else if($(this).hasClass("col4")){
$(this).width(col4);
}
else if($(this).hasClass("col5")){
$(this).width(col5);
}
else if($(this).hasClass("col6")){
$(this).width(col6);
}
else if($(this).hasClass("col7")){
$(this).width(col7);
}
else if($(this).hasClass("col8")){
$(this).width(col8);
}
else if($(this).hasClass("col9")){
$(this).width(col9);
}
else if($(this).hasClass("col10")){
$(this).width(col10);
}
else if($(this).hasClass("col11")){
$(this).width(col11);
}
else if($(this).hasClass("col12")){
$(this).width(col12);
}}
$(this).width(
//reduce by element's margin
$(this).width() -
(($(this).outerWidth(true) - $(this).width()) +
//reduce by percentage element is of total from parent padding
( //parent padding
($(this).parent().innerWidth() - $(this).parent().width()) *
//percentage of parent
($(this).outerWidth(true)/$(this).parent().width())
)+2
));
});
}
responsiveAdjust();
window.onresize = function(event) {
responsiveAdjust();
}
});