前言 平常 你在开发过程中是不是经常会遇到这种场景： 一个页面共有多个区域， 头部区域和中间区域是兄弟组件 头部区域有一个 按钮 会修改 中间部分的内容

呀呀呀，感觉好久没有更新文章了，闲暇之余，复盘了一下主流的抽奖效果实现，并且封装了一个工具类便于后期使用，这里借此机会分享给大家。

以上就是大概的实现思路了，有些地方还是略显粗糙的；另外从整体的描述来看，一些兼容的参考数值还是有点绕的，还是需要结合源码去跑一下，不然可能没有太直接的代入感；到最后也是希望能抛砖引玉了，探讨下多种实现方案，对比分析一些优缺点。

SVG 格式在 WEB 开发中有着广泛的应用，在使用 SVG 创建图标后，人们通常会为之增加一些简单动画：鼠标悬浮改变颜色透明度；利用 transform 旋转角度缩放尺寸；鼠标点击切换图标等，但这些简单动画并不过瘾。本文以「播放」和「暂停」图标切换为例，讲述如何创建图标变形动画，让图标切换更酷炫更平滑。

废话不多！想必大家对这个flexible.js的原理应该已经很了解了！[奸笑]，如不了解请自行百度 || 谷歌。大致的原理就是就以设计稿的宽度为基准，将设计稿平分为10份。然后将1/10份的大小设置成根节点的大小。1个rem就是1/10份的宽度值！对，没错！他的作用就是这么个作…

一、flex弹性的概念： 弹性盒子是一种用于按行或按列布局元素的一维布局方法，元素可以膨胀以填充额外的空间，收缩以适应更小的空间，适用于任何元素上，如果一个元素使用了flex弹性布局（以下都会简称为：

min/max - width/height 这几个我们不常用的属性，在某些时候还是能发挥奇效的。菜单动画，overflow:hidden失效等等！！

响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够。 响应式：只需要开发一套代码。 响应式设计通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容。 自适应：需要开发多…

前端开发，必然会遇到多端适应，在不同分辨率的设备上，拥有同样的效果。常见的方法有媒体查询、百分比、rem、vw/vh，开发人员在常用的px单位情况下，怎么运用上面的方法呢，请见正文。 px是跟常用的单位，比如厘米/米等固定单位是有区别的。 我们在pc端，设置文字16px，在移动…