// 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. spring boot yaml 自定义配置 映射到 java POJO

    只需要一个注解就ok: @ConfigurationProperties("user.other") “user.other” 这个值匹配的是user下的other对象 yaml ...

  2. ProC第一弹

    编译pro*c 的makefile例子 原来只需在makefile中追加include $(ORACLE_HOME)/precomp/lib/env_precomp.mk,其他一切按照makefile ...

  3. TCP的三次握手和四次握手

    三次握手(建立连接) 首先,服务器进程(B)先创建传控制块TCB(用来存储连接信息,如连接表,发送和接收序号等),准备接收客户进程(A)的请求.然后服务器进程处于LISTEN(收听)状态,等待客户的连 ...

  4. 20188472 https://www.cnblogs.com/chenzg90826/

    我是一名学计算机的大一学生,对学计算机比较感兴趣,但是对于计算机的了解程度还不够深,所以我在这方面还只是一个初学者.经过了一个学期对计算机和编程语言的学习,我觉得要真正的学好这门专业真的还要更努力.在 ...

  5. spoj104 HIGH - Highways 矩阵树定理

    欲学矩阵树定理必先自宫学习一些行列式的姿势 然后做一道例题 #include <iostream> #include <cstring> #include <cstdio ...

  6. luogu2951 noip2017 小凯的疑惑

    在考场上我们可以打表发现规律是 $ ab-a-b $ .下面给出证明(看的网上的). 若有正数 $ x $ 不能被 $ a $ , $ b $ 组合出,假设 $ a>b $ ,则存在 \[ x= ...

  7. luogu2698 [USACO12MAR]花盆Flowerpot

    单调队列+二分答案 #include <algorithm> #include <iostream> #include <cstring> #include < ...

  8. Spring学习总结(20)——Spring加载多个项目properties配置文件问题解决

    多数的鲜为人知方法都是因为有着罕见的应用,就比如说Spring中PropertyPlaceholderConfigurer这个类,它是用来解析Java Properties属性文件值,并提供在spri ...

  9. NetBeans无法使用编码GBK安全地打开该文件

    今天用NetBeans打开包含路径里面的UTF-8编码的文件时,提示:NetBeans无法使用编码GBK安全地打开该文件. 后来在网上搜索找到了解决方案,原文地址:http://qdjinxin.it ...

  10. webdriver高级应用- 在HTML5的画布元素上进行绘画操作

    #encoding=utf-8 import unittest from selenium import webdriver import time class TestDemo(unittest.T ...