A Multiple Devices Adaptive HTML5 Mobile Page Template Leveraging The REM Unit
JavaScript CSS HTML
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist @ 17741e7 gg Dec 12, 2015
src gogo Oct 8, 2016
.gitignore baidu tongji code Dec 12, 2015
.gitmodules
LICENSE Initial commit Oct 14, 2015
README-en.md
README.md upgrade dependencies Oct 8, 2016

README.md

rem-html5

English Readme File Is Here

这是一个全部使用REM尺寸单元做多设备适配的HTML5移动页面模板。

使用REM的目标自然是希望尽量一套代码适配多尺寸的移动终端,尽量减少在media query里面针对各种尺寸做微调。

特性

  1. 尺寸单元全部基于REM

    借助SASS的自定义函数,以及在页面头部引入下面这段JS,可轻易实现全REM化。

    //https://offroadcode.com/prototypes/rem-calculator/
    //以物理尺寸375px,设计稿750px为基准,我们设定100px=1rem,这样样式里面px换算成rem的公式为(@px/2)/100,其中2(750/375)为device ratio
    //如果设计稿为640px,基准设备物理尺寸为320,需要将designDeviceWidth设为320
    (function (doc, win, designDeviceWidth) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                var docElWidth = 100 * (clientWidth / designDeviceWidth);
                if (docElWidth > 200) docElWidth = 200;
                docEl.style.fontSize = docElWidth + 'px';
            };
    
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window, 375/* design device-width: 375 means iphone6 */);

    注意:如果PSD宽度为750 px, 则不需要改任何地方;如果设计稿是640px,请将上面JS方法中的375改为320即可。

    在SASS里面的REM尺寸,再也不用将设计稿量出来后除以2的换算,直接调用我们提供的函数即可使用设计稿里的原始尺寸即可:

    例如字体设置:

    font-size: _rem(28px);
    
  2. 基于Gulp的自动化构建

    所有的Gulp任务置于gulp-taks目录。

    包括:

    • 合并资源(concat.js)

    • 压缩CSS (css.js)

    • 本地web服务(express.js)

    • 压缩图片 (imagemin.js)

    • 压缩JS (js.js)

    • JS语法检测(lint.js)

    • 自动刷新页面或样式(reload.js、reloadCss.js)

      需要安装livereload插件

    • 实时编译SASS (sass.js)

    • 雪碧图 (sprites.js)

      切好的图标,只需要放在sprites目录,gulp会自动生成sprite.pngsass/includes/sprite.scss

    • SVN集成(svn.js)

      试验性,暂不建议使用。

    • Swig模板引擎(swig.js)

    • 文件更新监测(watch.js)

Demo

一个使用rem-html5构建的在线DEMO.

qrcode

使用指引

  1. 将rem-html5克隆至本地

    git clone git@github.com:mamboer/rem-html5.git myapp
    
  2. 安装bower资源

    cd myapp/src
    bower install
    

    第三方静态资源通过bower配置,具体参考bower.json

  3. 安装NodeJS包

    npm install
    
  4. 启动myapp

    gulp
    

    需先安装gulp,没安装的请运行npm i -g gulp-cli.

  5. 浏览器访问localhost:4000/dist/

    使用你喜爱的代码编辑器编辑开始码吧。