Giter Site home page Giter Site logo

mtb-flexible's Introduction

MTB-FLEXIBLE

模仿手淘rem移动端自适应方案

根据m.taobao.com的移动端rem自适应方案, 将页面宽度分为10等分, 1rem = html.style.fontSize = pageWidth / 10

USAGE:

在html的head标签, 添加script引用

<script src="//ss.yidejia.com/lib/flexible/{version}/flexible.js"></script>

然后页面会自动添加移动端的meta标签,声明viewport属性(默认开启高清方案, 无需手动声明viewport)

并且自动设置html的一些必要属性,例如data-dpr,font-size等等

例如:

<html lang="en" data-dpr="1" style="font-size: 54px;">

脚本运行成功后, 会产生对象: window.lib.flexible

自行查看window.lib.flexible中提供的属性和方法

PS:

脚本默认开启高清dpr方案, 例如在iphone6高清屏上, dpr会设置为2, initial-scale, minimum-scale, maximum-scale都会变成0.5, 那么对应页宽是750px, 这种情况下无法使用大部分移动端UI框架(px布局), 如果需要兼容使用UI框架,需要添加以下标签到head标签里面

 <meta name="flexible" content="initial-dpr=1, maximum-dpr=1">

或者,强制声明viewport

<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-sacle=1, user-scalable=no">

样式处理:

  • lessscss 可以自己编写function进行换算, 也可以通过postcss后续处理

  • css 自己通过编辑器插件工具换算活着通过 postcss 处理

  • postcss插件: https://github.com/cuth/postcss-pxtorem

开发说明:

npm scripts

  • npm run build

    开发构建, 自动监听变化

  • npm run qn

    部署cdn

mtb-flexible's People

Contributors

vega-wong avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.