@如何实现自适应布局
- 自适应布局：设备尺寸不同时自动加载不同样式
- 媒体查询：根据不同设备宽度配置不同样式或引入不同样式文件
- rem：为不同设备设置不同根元素font-size
@如何实现响应式布局
- 响应式布局：屏幕缩放时布局自动响应
- 弹性盒布局
- 百分比布局
- vw/vh
- em/rem/rpx
- 使用JS监听window.onresize事件做特殊处置
@如何让Echarts数据页同时适配PC和大屏
- 参见自适应布局
@子盒子在父盒子中宽高居中
- 盒模型实现：暴力计算margin或padding；
- 弹性盒实现：弹性盒，内容纵横居中；
.parent-box {
display:flex;
justify-content:center;
align-items:center;
}
- 定位+偏移实现：子盒子左上角绝对定位到父盒子几何中心，再向左上偏移自身宽高的一半
.parent-box {
position:relative;
.child-box{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
}
@常用的flex属性
晚点再来
@CSS如何设置动画
晚点再来
@用过animate.css吗
晚点再来
@如何解决浏览器兼容性问题
- 需要考虑CSS和JS的兼容；
- 在CanIUse上可以查询任意CSS属性和JS-API在各不同浏览器上的兼容性；
- 兼容性问题的具体症状高度碎片化，兼容方案千奇百怪，比较常见的兼容手段有：
- 全局reset：例如手动设置所有元素的margin和padding都为0，所有cursor默认为pointer，a标签的outline默认为none，img的border默认为none等；
- IE的特殊CSS语法：IE浏览器特别是老版本的IE浏览器很多CSS语法没有遵从W3C标准，例如min-height要写为_height，display:inline-block要写为*display:inline等；
- 浏览器兼容前缀：特定样式在特定浏览器上需要特定前缀，Webpack的autoprefixer插件能自动帮我们做这个工作；
- JS-API：对特定JS-API做浏览器判断和分类处理；
- 此处我收藏了一篇文章，上面有几十个CSS和JS特殊CASE的兼容方案：
- 收藏的文章在这里
@说说你对canvas的认识
晚点再来
@使用canvas过程中遇见过哪些坑
晚点再来
