很久沒更新部落格，這段時間剛剛找到工作，會立即（從今天起）恢復更新部落格的頻率。羅馬不是一天建成的，希望自己保持良好的學習和做筆記的習慣，筆耕不綴，他日可期！
在第一次接手重構任務後，有點懵逼。可能是因為自己很久沒有寫**了，忘了以前做的響應式的一些細節，所以又開始不斷的除錯，總算是把坑補上了，於是在此做一下記錄。
psd需求圖：
給整個頁面給乙個 container類，並且限制 max-width 為1122px。
頁面中右側的小兔，因為所有都是從後台介面調取，一旦設定img-responsive，那麼預設的max-width就是100%(想象一下，如果後台傳來乙個1000寬的圖，使用者網路慢點，基本上就gg了)，只能按照原圖比例來縮放，何況每個的容器都是動態高度的…所以，每張的寬高，盡可能的去用js動態設定。
盡量使用rem，設定好body的font-size，然後各部分的font-size都根據rem去取，例如 0.8rem,0.6rem等等。
布局方面，左側的長圖固定的，非介面調取，寬高固定的。在整個頁面中，縮放的比例完全是以此作為參照物。因此給此加上img-responsive以及col-lg-3 col-md-3 col-sm-6 col-xs-6類，然後動態的讓單個盒子容器的高度取 左側長圖的高度，這樣會讓盒子完美的呈現，不會留有內邊距，也不會讓box-shadow很難看。
右側的6張小圖，每縱向的兩個圖使用乙個列容器來包裹，設定 col-lg-3 col-md-3 col-sm-6 col-xs-6，這樣就可以達到在手機端的顯示效果，如圖所示：
//動態設定每個box-shadow 容器的高度，為imglong的高度
var h = $('#imglong').first().height();
$('.box').each(function
());
});$(window).resize(function
())});
});//限制h4標籤文字長度
$('.imgtitle').each(function
() });
//為所有呼叫的imgshort增加class
$('.imgshortparent img').each(function
());
//動態設定每個單列容器的寬度 = imglong的寬度，高度 = imglong的高度，以此來保證不會溢位 box-shadow。
var h = $('.imglong').first().height();
var w = $('.imglong').first().width();
$('.col-box').each(function
());
$(window).resize(function
())})
解決方案：
可以為每張小圖(250*165)包裹一層div，設定max-height與max-width，overflow:hidden，來解決。
3.2 實際上，整個專案我寫了兩套html骨架（由於專案緊，剛接手，長時間沒寫**比較陌生），pc一套，mobile一套，感到非常罪過，不配成為乙個前端工程師。。。但是話說回來，原先的專案也寫的太tm亂了，乙個注釋都沒有，而且乙個頁面中script標籤不下20個。。。
解決方案：
用我上述的思路去實現
基於bootstrap的mvcpager簡單分頁
然後匯入命名空間 using webdiyer.webcontrols.mvc 前提是要引用dll檔案 下面是源 控制器 public actionresult basic string id else return view list 檢視頁面 切記要匯入命名空間 using boostrap.m...
基於bootstrap的網頁開發
1.html5shiv.js的作用是？html5shiv主要解決html5提出的新的元素不被ie6 8識別，這些新元素不能作為父節點包裹子元素，並且不能應用css樣式。讓css 樣式應用在未知元素上只需執行 document.createelement elementname 即可實現。html5s...
基於bootstrap 模態框的警告框
基於bootstrap 模態框的警告框 1，匯入bootstrap 外掛程式，2，jsp中的警告框 class modal fade id myalert style z index 2000 class modal backdrop in style z index 1900 div class ...