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

最新推荐文章于 2024-07-11 17:17:41 发布

weixin_33875839

最新推荐文章于 2024-07-11 17:17:41 发布

阅读量132

点赞数 1

文章标签：前端 ViewUI

原文链接：https://segmentfault.com/a/1190000007881262

版权

前言

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

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后即可直接使用
我们建议你使用以下模板进行开发：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>template</title>
    <script src="adaptive.min.js"></script>
    <style>
        .wrap{
            position: relative;
            width: 10rem;
            margin:0 auto;
        }
    </style>
    </head>
<body>
<div class="wrap">

    <!-- code -->
    
</div>
</body>
</html>

最后附上adaptive.js地址：https://github.com/Vibing/ada...

weixin_33875839

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
adaptive.js让移动端开发更简单的方案

前言对于手机不离手的当今社会，移动端页面开发已经成了日常便饭，如何让手机页面开发起来更省心是一个前端工程师必不可少的技能。adaptive.js由本人借鉴手淘方案编写的非常小巧的js代码片段，它可以让你的手机页面开发起来更省心。废话不多说，让我们先看看一个demo页面：你可以点击打开页面，在Chrome浏览器上使用移动端模拟器查...
复制链接

扫一扫

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

“相关推荐”对你有帮助么？