前端採用技術棧爲：
- vue
- nuxt.js
- iview
- jqeury
遇到兩大問題：
- 各個屏幕尺寸之間 分辨率自適應問題
- 各個瀏覽器版本之間的兼容性問題
遇到的小問題
- 輪播圖片、輪播動畫
- css3動畫
- postion定位
- 服務端字體 與 客戶端字體的顯示問題
- 各個屏幕分辨率下 字體粗細問題
·
解決：
-
各個屏幕尺寸之間 分辨率自適應問題
- 採用iview的響應式佈局。
- 在開發過程中版心的寬度儘量不要寫成百分比，依京東、簡書爲例；版心的寬寫成固定寬度的值。
- 採用iview佈局的話好像只在IE9以上版本纔可以用，但用vue的話也只能支持IE9以上版本了。
-
各個瀏覽器版本之間的兼容性問題
- 一般情況下，瀏覽器沒問題，但IE內核除外！ 國產瀏覽器大部分都是雙核或三核的（IE兼容+IE+谷歌內核）
- 比如在用js給元素添加class值的時候，現今主流瀏覽器以及推薦辦法都是 item.classList.add(“style”);但這種辦法在IE版本中（含IE11版本） 和 QQ瀏覽器兼容模式以及百度瀏覽器下都是不支持的。
- 然後jquery就應運而來了，jquery 在添加class的時候有一個addClass的API，這個在主流瀏覽器下也是沒問題，但IE流 就不行啦。還好jquery提供了另外了一種API：(‘p’).attr(“1”, “2”);這時再看dom，發現p元素多了一個1=2的屬性。
- 最終解決各瀏覽器內核間不兼容問題的辦法是： 在頁面head中加入meta標籤，強制使用谷歌內核或最高版本的IE內核。
<!-- 強制Chromium內核，作用於360瀏覽器、QQ瀏覽器等國產雙核瀏覽器 --> <meta name="renderer" content="webkit"> <!-- 強制Chromium內核，作用於其他雙核瀏覽器 --> <meta name="force-rendering" content="webkit"> <!-- 如果有安裝 Google Chrome Frame 插件則強制爲Chromium內核，否則強制本機支持的最高版本IE內核，作用於IE瀏覽器 --> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <!-- 提示低版本IE訪問用戶升級 --> <script> /*@cc_on window.location.href="http://support.dmeng.net/upgrade-your-browser.html?referrer="+encodeURIComponent(window.location.href); @*/ </script>（@cc_on 是 IE10 及更舊版IE特有的條件編譯語句，因此可以用來判斷是否除 IE11 以外的其他IE版本。）
-
css3動畫：
我是c3動畫配合postion來做動畫等的；postion的話 指定父盒子 relative， 子盒子absolute；然後配合c3動畫就實現了。
關於c3動畫的使用(我用到以下兩種)：
.long{
height: 70px!important;
transition: height 0.5s ease-out;
# height 規定設置過渡效果的 CSS 屬性的名稱。
# 0.5s 規定完成過渡效果需要多少秒或毫秒。
# ease-out 規定以慢速結束的過渡效果（等於 cubic-bezier(0,0,0.58,1)）（相對於勻速，開始時快，結束時候間慢
鏈接：https://blog.csdn.net/Candy_10181/article/details/80611009
}
.topUP{
top:72px;
animation: top 0.5s;
}
@keyframes top {
0% {
top:0px;
}
100% {
top: -24px;
}
}
# 這個應該都能看懂，不解釋了
- 前端項目指定自定義字體顯示
1）定義字體名稱和自定義字體路徑。
/* SourceHanSansCN-Regular */
@font-face {
font-family: '我的自定義字體'; //這裏是你自定義字體的名稱
// 以下是字體路徑
src: url('../../fonts/SourceHanSansCN-Regular-Alphabetic.eot');
src: url('../../fonts/SourceHanSansCN-Regular-Alphabetic.eot?#iefix') format('embedded-opentype'),
url('../../fonts/SourceHanSansCN-Regular-Alphabetic.svg#SourceHanSansCN-Regular-Alphabetic') format('svg'),
url('../../fonts/SourceHanSansCN-Regular-Alphabetic.ttf') format('truetype'),
url('../../fonts/SourceHanSansCN-Regular-Alphabetic.woff') format('woff'),
url('../../fonts/SourceHanSansCN-Regular-Alphabetic.woff2') format('woff2');
}
關於生成不同.ttf,.woff,.eot格式字體文件和生成以上的css,推薦一網站：https://onlinefontconverter.com/
2）在同一css中正常引用上方設置的名稱即可。
p{
font-family: '我的自定義字體';
}
關於@font-face 更多參考：http://www.511yj.com/css-font-face.html
關於更多，請訪問： http://www.ofus.ink