我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛
前言
兔了个兔蹦蹦跳，新的一年已来到。最近做了一个关于屏幕适配的需求，有收获，有成长，分享出来。蹦，沙咔啦咔~~~在此特别感谢，研发主管对需求的把控，前端负责人对适配方案的建议，师傅对代码规范的要求。
需求
需求效果为头图，具体要求：1.在pc浏览器端显示电脑外边框；2.兔子图片为内容区域横向展示；3.超出内容区域显示滚动条可使用鼠标滑动。
需求比较简单，实现起来花费些时间。屏幕适配的方案很多：
1.em、rem和px
2.百分比和媒体查询
3.flexible.js和viewport（移动端）等等
随着不断开发，慢慢发现，想要提升就需要从解决一个需求延伸为拓展一套解决方案。
方案
一套解决解决方案肯定无法解决各式各样的需求，但是解决方案越全面开发越高效，思路和框架都是相通的。
屏幕适配第一点，不同尺寸下布局不变。刚开始设置电脑外边框百分比和内容区图片百分比在屏幕居中显示，屏幕尺寸变小之后，内容区图片布局错乱。在前端负责人的建议下对电脑边框使用最小宽高限制，保证适配第一点布局不错乱的效果。除此之外，最近看到一个特别的场景，如果使用手机“关怀模式”，字体会变大，很多已经做了屏幕适配的软件会出现布局错乱的现象。
适配基本要求还有其他方面，寻求不同的技术解决并实现。一套好的解决方案，全面兼容包含技术多。同理，开发思路也要做到全面兼容，考虑多种业务场景、极端环境以及特殊配置。
细节
解决方案需要全面，落实到实处就是各种细节。在需求开发中，刚开始只考虑出现滚动条可以滑动展示。同样在前端负责人建议下，监听鼠标事件，操作鼠标滚轮和触摸板实现滑动。另外，还有一些边框间距的调整也是面面俱到。所以，细节决定成败，开发亦是如此。
