前言
对于手机不离手的当今社会,移动端页面开发已经成了日常便饭,如何让手机页面开发起来更省心是一个前端工程师必不可少的技能。
由本人借鉴手淘方案编写的非常小巧的js代码片段,它可以让你的手机页面开发起来更省心。
废话不多说,让我们先看看一个demo
页面: 你可以,在
Chrome
浏览器上使用移动端模拟器查看或者使用手机扫描二维码查看:
方案原理
借鉴手淘方案,adaptive.js
将整个页面宽度平均分成10份,以clineWidth / 10
的结果作为html
标签的font-size
值。布局中使用rem
作为单位。
举个栗子
某UI设计出来的手机页面设计稿宽为750px
,那么分成十份后为75px
,此时html
标签的font-size: 75px
,
100px
,转成rem
则为:100 / 75 = 1.3333rem
;在css中则为:width: 1.3333rem
。 使用方法
adaptive.js
非常小巧,压缩后的adaptive.min.js
大小只有1KB。
adaptive.js
不依赖任何js库,你可以在head标签内引用adaptive.min.js
后即可直接使用我们建议你使用以下模板进行开发: template
最后附上adaptive.js
地址: