adaptive.js让移动端开发更简单的方案

Paul_King 发布于2019-08-21 11:20 / 2101人阅读

摘要：前言对于手机不离手的当今社会，移动端页面开发已经成了日常便饭，如何让手机页面开发起来更省心是一个前端工程师必不可少的技能。由本人借鉴手淘方案编写的非常小巧的代码片段，它可以让你的手机页面开发起来更省心。布局中使用作为单位。

前言

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

adaptive.js

由本人借鉴手淘方案编写的非常小巧的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地址：https://github.com/Vibing/ada...

GPU云服务器云服务器移动端适配方案移动端开发 web移动端开发移动端网站开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86581.html

从零搭建移动H5开发项目实战

摘要：并且除了常用的端，还要考虑微信端，或者是端。所以我们要有一套机制，在端上走的代码，在端或者微信端上走端对应的代码。对于一个从零开始的移动端项目，我总结了以上这些移动开发难点，希望之后的人能少踩点坑，站在我的肩膀上提高项目开发的效率和质量。从零搭建移动H5开发项目实战前端H5的前世今身在Pc的时代，前端技术无疑统治了大多数用户的交互界面！而在移动为王的今天，NA开发在早期占领了大多...

terro 2019-08-29 11:32 评论0 收藏0
从零搭建移动H5开发项目实战

摘要：并且除了常用的端，还要考虑微信端，或者是端。所以我们要有一套机制，在端上走的代码，在端或者微信端上走端对应的代码。对于一个从零开始的移动端项目，我总结了以上这些移动开发难点，希望之后的人能少踩点坑，站在我的肩膀上提高项目开发的效率和质量。从零搭建移动H5开发项目实战前端H5的前世今身在Pc的时代，前端技术无疑统治了大多数用户的交互界面！而在移动为王的今天，NA开发在早期占领了大多...

pepperwang 2019-08-20 12:14 评论0 收藏0
蚂蚁金服移动端可视化解决方案 F2 3.2 正式发布

摘要：，一个专注于移动，开箱即用的可视化解决方案，完美支持环境同时兼容多种环境小程序，。专业的移动设计指引为你带来最佳的移动端图表体验。基于，移动端可视化图表库。 showImg(https://segmentfault.com/img/remote/1460000016176811?w=1600&h=440); F2，一个专注于移动，开箱即用的可视化解决方案，完美支持 H5 环境同时兼容多...

sydMobile 2019-08-23 11:33 评论0 收藏0