博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
adaptive.js让移动端开发更简单的方案
阅读量:6389 次
发布时间:2019-06-23

本文共 620 字,大约阅读时间需要 2 分钟。

前言

对于手机不离手的当今社会,移动端页面开发已经成了日常便饭,如何让手机页面开发起来更省心是一个前端工程师必不可少的技能。

由本人借鉴手淘方案编写的非常小巧的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地址:

转载地址:http://rodha.baihongyu.com/

你可能感兴趣的文章
flask的orm操作
查看>>
如何防止驱动被恶意利用
查看>>
Nagios的搭建
查看>>
我的友情链接
查看>>
Oracle SQL之--多表查询基础用法
查看>>
图形化插件对Eclipse的版本要求
查看>>
两个关于数列的Python脚本(斐波那契数列和猴子吃香蕉类问题)
查看>>
olabuy-时光从来素默,内心应保持一份素淡与简静
查看>>
kux文件怎么打开 苹果手机如何观看kux视频
查看>>
Python中的urllib.request模块
查看>>
第九课 《说人话》
查看>>
js对象数组排序
查看>>
如何实现在展示商品时,放大商品细节
查看>>
uboot boot流程分析
查看>>
如何学习PHP整个体系的?
查看>>
css三角形实现写法全攻略收集
查看>>
Enterprise and the press public MBT Fora
查看>>
js常用代码整理
查看>>
富文本编辑器TinyMCE
查看>>
01_vue实例_数据_方法
查看>>