adaptive.js讓移動端開發更簡單的方案

時間 2019-12-06

標籤 adaptive.js adaptive 移動開發簡單方案欄目 JavaScript 简体版

原文原文鏈接

前言css

對於手機不離手的當今社會，移動端頁面開發已經成了平常便飯，如何讓手機頁面開發起來更省心是一個前端工程師必不可少的技能。html

adaptive.js前端

由本人借鑑手淘方案編寫的很是小巧的js代碼片斷，它能夠讓你的手機頁面開發起來更省心。
廢話很少說，讓咱們先看看一個demo頁面：git

你能夠點擊打開頁面，在Chrome瀏覽器上使用移動端模擬器查看github
或者使用手機掃描二維碼查看：
web

方案原理瀏覽器

借鑑手淘方案，adaptive.js將整個頁面寬度平均分紅10份，以clineWidth / 10的結果做爲html標籤的font-size值。佈局中使用rem做爲單位。前端工程師

舉個栗子app

某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...