// 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. Linux中nginx的常见指令

    1.启动cd /usr/local/nginxsbin/nginx 版权声明:本文为博主原创文章,未经博主允许不得转载. 原文地址: https://www.cnblogs.com/poterliu/ ...

  2. 如何用纯 CSS 和 D3 创作一只扭动的蠕虫

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/QBQJMg 可交互视频 ...

  3. [译]The Python Tutorial#8. Errors and Exceptions

    [译]The Python Tutorial#Errors and Exceptions 到现在为止都没有过多介绍错误信息,但是已经在一些示例中使用过错误信息.Python至少有两种类型的错误:语法错 ...

  4. LeetCode（234） Palindrome Linked List

    题目 Given a singly linked list, determine if it is a palindrome. Follow up: Could you do it in O(n) t ...

  5. Linux学习-函式库管理

    动态与静态函式库 首先我们要知道的是,函式库的类型有哪些?依据函式库被使用的类型而分为两大类,分别是静态 (Static) 与动态 (Dynamic) 函式库两类. 静态函式库的特色: 扩展名:(扩展 ...

  6. ATM源码

    package atm;//张秋亮,信1705-3,20173529 public class Account { private String accountID; private String a ...

  7. STF 连接其它操作系统上的安卓设备实操介绍【转】

    功能简介:https://www.jianshu.com/p/464fadaeb1d7 搭建教程:https://blog.csdn.net/xl_lx/article/details/7944586 ...

  8. 大数据学习——KETTLE入门学习——kettle安装

    https://blog.csdn.net/u012637358/article/details/82593492 下载的kettle是汉化的 改成英文的 工具——选项——选择英文

  9. 【水】ZYH记

    我从十二岁起,便在sdoj的蒟蒻餐厅里当伙计,root说,样子太傻,怕侍候不了专职切题,就在外面做点事罢.外面的调试管理,虽然容易说话,但唠唠叨叨缠夹不清的也很不少.他们往往要亲眼看着一个字一个字编译 ...

  10. TOJ1017: Tour Guide

      描述 You are working as a guide on a tour bus for retired people, and today you have taken your regu ...