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

Paul_King 發布于2019-08-21 11:20 / 2099人閱讀

摘要：前言對于手機不離手的當今社會，移動端頁面開發已經成了日常便飯，如何讓手機頁面開發起來更省心是一個前端工程師必不可少的技能。由本人借鑒手淘方案編寫的非常小巧的代碼片段，它可以讓你的手機頁面開發起來更省心。布局中使用作為單位。

前言

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

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移動端開發移動端網站開發

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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