// 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. centos里没有pip命令怎么办?

    刚刚入门python的嘛,然后这个centos也是不是那么熟悉!! pip在centos也没有,所以网上找来资料,3条语句就搞定啦! 1.查看是否安装依赖包,没安装先安装: yum install e ...

  2. AES加密、解密工具类

    AES加密.解密工具类代码如下: package com.util; import java.io.IOException; import java.io.UnsupportedEncodingExc ...

  3. python多进程并发进程池Pool

    简介: python中的多进程主要使用到 multiprocessing 这个库.低版本python这个库在使用 multiprocessing.Manager().Queue时会出问题,建议大家升级 ...

  4. Applied Nonparametric Statistics-lec4

    Ref: https://onlinecourses.science.psu.edu/stat464/print/book/export/html/5 Two sample test 直接使用R的t- ...

  5. Java基础之封装

    封装(Encapsulation)是java面向对象的三大特性,之前学java迷迷糊糊,一直也没弄清楚什么是封装以及为什么要封装,直到这次看书才有一种被点醒的感觉. java中的封装是针对某个类而言的 ...

  6. HDU 5047 Sawtooth 高精度

    题意: 给出一个\(n(0 \leq n \leq 10^{12})\),问\(n\)个\(M\)形的折线最多可以把平面分成几部分. 分析: 很容易猜出来这种公式一定的关于\(n\)的一个二次多项式. ...

  7. 配置LAMP环境

    对我这种Linux小菜鸡来说,集成环境是最好的选择. 一,下载wget --no-check-certificate https://github.com/teddysun/lamp-yum/arch ...

  8. webdriver高级应用- 使用日志模块记录测试过程中的信息

    在自动化脚本执行过程中,使用Python的日志模块记录在测试用例执行过程中一些重要信息或者错误日志等,用于监控和后续调试脚本. 在pycharm下新建工程,并创建Log.py.Logger.conf以 ...

  9. python - 目录处理

    # -*- coding:utf-8 -*- '''@project: jiaxy@author: Jimmy@file: study_文件目录操作.py@ide: PyCharm Community ...

  10. Python面试题(练习二)

    1.用Python实现一个二分查找的函数. data = [1, 3, 6, 7, 9, 12, 14, 16, 17, 18, 20, 21, 22, 23, 30, 32, 33, 35] def ...