网格布局 【文章第一句】本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。 一、什么是网格布局 网格布局，顾名思义就是像网一样有一个个格子一样的布局。在一个容器里面，我们可以切割成很多行很多列

在过去的几年时间里，移动端web野蛮生长，智能机的Android阵营和IOS阵营分庭抗礼，随之产生了多个系统版本（系统版本多样）；五花八门的屏幕尺寸、屏幕展示技术（如大名鼎鼎的Retina技术屏）层出不穷（屏幕尺寸、技术多样），还是CSS的W3C标准在各式各样的移动端浏览器上落…

Hi～ 我是前端学徒业枫，今天继续向大家分享可视化系列文章，介绍我们的前端开源图表库📈 CloudCharts（Github 欢迎试用&Issue&PR） 如何基于 G2 封装，解决其在大规模使用场景中遇到的问题，通过少量配置项即可绘制图表，服务内部近两百…

关于flexible的第一篇介绍文章是大漠的《使用Flexible实现手淘H5页面的终端适配》。请先阅读这篇文章再来看本文。 三年前看的时候就一个感觉Perfect，还有这么神奇的操作，但是深入到原理就有点似懂非懂，向其他同学推荐的时候，总有些细节讲不清楚。究其原因是自己没有深…

前面写过一篇移动端适配实践的文章，很长，内容太多，看得容易凌乱，重新写个通熟易懂版的。 比如，对于一个移动端页面，设计师给的视觉稿画布宽 750，视觉稿中的一个黄色区块的尺寸是 702 x 300，并在画板中居中。我们希望在任何一个设备中的呈现比例都与视觉稿中一样，根据布局视口…

1. 三种单位详解 相对长度单位。像素 px 是相对于显示器屏幕分辨率而言的。 利用 px 设置字体大小及元素宽高等比较稳定和精确。Px 的缺点是其不能适应浏览器缩放时产生的变化，因此一般不用于响应式网站。 相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺…

在过去的一段时间里面一直在使用Vue配合 lib-flexible和px2rem-loader配合做移动端的网页适配。秉着求知的思想，今天决定对他的原理进行分析。目前网上比较主流使用的就是淘宝方案和网易的解决方案，所以今天我就从这两方面入手深度了解这两个方案。本着互联网分享的精…

看这两个函数，把这些代码放到js里面，规则就是，调用函数，放两个参数，第一个参数，是设计稿的宽度，第二个参数是px与rem的转换比例，通常会写100（因为好算）；当然了，要把这段js代码最好封装在一个单独的js文件里，并且放在所有的css文件引入之前加载。 实际应用起来就是，#…

虽然上面这种简单的使用百分比可以实现但是，百分比无法实现字体的自适应，百分比转换成相应的尺寸还是很难的。接下来就说说这次我们的主角 rem （我们一般只适配宽度） 首先rem是一个相对于根元素fontSize大小的相对单位，也就是说 1rem 等于 html 的 fontSiz…