// rem
(function(doc, win) {
      var docEle = doc.documentElement,
        evt = "onorientationchange" in window ? "orientationchange" : "resize",
        fn = function() {
        var width = docEle.clientWidth;
        width && (docEle.style.fontSize = 100 * (width / 720) + "px");
        }
      win.addEventListener(evt, fn , false);
      doc.addEventListener("DOMContentLoaded", fn, false)
    }(document, window))

html --- rem的更多相关文章

  1. 在rem布局下使用背景图片以及sprite

    现在移动端页面用rem布局已经是一大流派了,成熟的框架如淘宝的flexiable.js,以及我的好友@墨尘写的更轻量级的hotcss.用rem作单位使得元素能够自适应后,还有一块需要关注的,那就是背景 ...

  2. 移动端自适应之——rem与font-size

    需求:在不同的移动终端设备中实现,UI设计稿的等比例适配. 方案:布局排版都用rem做单位,然后不同宽度的屏,js动态计算根节点的font-size. 假设设计稿是宽750px来做的,书写css方便计 ...

  3. px-rem px转换为rem的工具

    将px转换为rem的工具,github地址:https://github.com/finance-sh/px-rem 将px转换为rem的工具 怎样转换静态文件 安装: npm install px- ...

  4. px-rem 一个将px转换为rem的工具

    将px转换为rem的工具,github地址:https://github.com/finance-sh/px-rem 怎样转换静态文件 安装: npm install px-rem -g 然后跑下命令 ...

  5. 基于rem的移动端自适应解决方案

    代码有更新,最好直接查看github: https://github.com/finance-sh/adaptive adaptivejs原理: 利用rem布局,根据公式 html元素字体大小 = d ...

  6. px和em,rem的区别

    1.px是你屏幕设备物理上能显示出的最小的一个点,这个点不是固定宽度的,不同设备上点的长宽.比例有可能会不同.假设:你现在用的显示器上1px宽=1毫米,但我用的显示器1px宽=两毫米,那么你定义一个d ...

  7. Sublime 插件- px 转rem

    一个CSS的px值转rem值的Sublime Text 3自动完成插件. 插件效果如下: 安装 克隆项目   https://github.com/hyb628/cssrem.git 进入packag ...

  8. 响应式布局-Rem的用法

    前言: 文章较为系统地介绍了rem这个新的文字大小单位,绝对干货,绝对好文.转载时略有改动.   先来看看一些基本理念,比如: 响应式网页不仅仅是响应不同类型的设备,而且需要响应不同的用户需求.响应式 ...

  9. 手机端页面自适应之rem布局

    W3C官网上是这样描述rem的--"font size of the root element" . rem布局在移动端发挥的比较好. 阿里团队高清方案: <script&g ...

  10. WebApp开发之--"rem"单位

    随着web app的兴起,rem这是个低调的css单位,近一两年开始崭露头角,有许多朋友对于它的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我认为rem是用来做web app它绝对是 ...

随机推荐

  1. Win10家庭版找不到组策略gpedit.msc

    首先在桌面上建立一个txt文本文件,将下面的代码复制到里面 @echo off pushd "%~dp0" dir /b C:\Windows\servicing\Packages ...

  2. paper:基于verilog HDL 的高速可综合FSM设计

    1.寄存器输出型状态机 VS 组合逻辑输出型状态机 2.状态编码方法 这块讲的不好,也比较少. 3.系统设计中模块划分的指导性原则

  3. crond定时操作 crontab

    * * * * *  分别表示 分钟  小时  日  月  星期(0-6) 30 17,28,19 * * *  或 30 17-19 * * *  在每天的17-19小时半点时刻执行 30 8-18 ...

  4. JQuery根据字母检索元素并导航到指定位置

    介绍:类似于实现ios通讯录中右侧字母,快速导航到联系人的效果,如图: Html代码如下,分别是字母和港星名字的排序: <input type="text" id=" ...

  5. Linux学习-磁盘配额 (Quota) 的应用与实作

    什么是 Quota 在 Linux 系统中,由于是多人多任务的环境,所以会有多人共同使用一个硬盘空间的情况发生, 如 果其中有少数几个使用者大量的占掉了硬盘空间的话,那势必压缩其他使用者的使用权力! ...

  6. 针对NM_CUSTOMDRAW消息的学习

    消息的形式:1 窗口消息,2 命令消息,3 WM_NOTIFY消息,4 自定义消息 我们的NM_CUSTOMDRAW消息就是就属于第三种WM_NOTIFY消息,而添加消息映射的方法分为两种: BEGI ...

  7. BZOJ 3326: [Scoi2013]数数

    数位DP,然而式子真的复杂 #include<cstdio> #include<algorithm> #include<cstring> using namespa ...

  8. meta-data

    <meta-data android:name="string"   android:resource="resource specification"  ...

  9. day04_01 知识回顾、算术运算符

    ","和"+"的区别 除法运算,整除//,别名"地板除" 取余数 2**10 2的10次方 指数运算 指数运算符优先级要比乘法要高,所以先算 ...

  10. SDOJ 3742 黑白图

    [描述] 一个 n 个点 m 条边构成的无向带权图.由一些黑点与白点构成 树现在每个白点都要与他距离最近的黑点通过最短路连接(如果有很多个,可以选 取其中任意一个),我们想要使得花费的代价最小.请问这 ...