本文链接：https://blog.csdn.net/Py1807A/article/details/101213264

前端采用技术栈为：

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^{'}) . a t t r (^{'} c l a s s^{'},^{'} s t y l e^{'}); 这样添加的话浏览器各个版本都是支持的。 a t t r 这个 A P I 非常有意思，比如$ (‘p’).attr(“1”, “2”);这时再看dom，发现p元素多了一个1=2的属性。
- 最终解决各浏览器内核间不兼容问题的办法是：在页面head中加入meta标签，强制使用谷歌内核或最高版本的IE内核。
```

<meta name="renderer" content="webkit">

<meta name="force-rendering" content="webkit">

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">


<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

项目1 前端开发总结

前端采用技术栈为：

遇到两大问题：

遇到的小问题

解决：