Skip to content

Vibing/adaptive

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

adaptive.js

  • 借鉴手淘方案,使移动端自适应开发更方便。
  • 抛弃[data-dpr="2"] span{font-size: 32px;}的兼容写法

theory

借鉴手淘方案,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

usage

adaptive.js非常小巧,压缩后的adaptive.min.js大小只有1KB。 adaptive.js不依赖任何js库,你可以在head标签内引用adaptive.min.js后即可直接使用

template

<!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">

</div>
</body>
</html>

demo

点我查看小demo 你可以在任何安卓机或iphone上进行测试,如果有问题请到我的segmentfault联系我

About

使移动端自适应开发更方便,Demo: https://vibing.github.io/adaptive

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages