<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, minimum-scale=1">

    <script type="text/javascript">

        if(document.documentElement.clientWidth < 750){

            document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*32 + 'px';

            console.log(document.documentElement.clientWidth)

        }else{

            document.documentElement.style.fontSize = "16px";

        }

    </script>

</head>

<body>

<div>

    <span style="font-size:1rem;">danny.xie</span>

    <span style="font-size:16px;">danny.xie</span>

</div>

</body>

</html>

自定义rem的更多相关文章

  1. 关于rem的自定义HTML比例设定

    通过设定html根标签的font-size值,控制rem来达到全局布局的自适应的,CSS长度单位全部通过rem设定 必须在head在中引入不可以延迟引入: (function (doc, win) { ...

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

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

  3. 基于Bootstrap里面的Button dropdown打造自定义select

    最近工作非常的忙,在对一个系统进行改版.项目后台是MVC1.0开发的,但是前端部分已经改过几个版本,而已之前的设计师很强大,又做设计又做前端开发.而已很时尚和前沿,使用了一直都很热门的Bootstra ...

  4. CSS尺寸单位 % px em rem 详解

    在CSS中,尺寸单位分为两类:相对长度单位和绝对长度单位.相对长度单位按照不同的参考元素,又可以分为字体相对单位和视窗相对单位.字体相对单位有:em.ex.ch.rem:视窗相对单位有:vw.vh.v ...

  5. webapp，liveapp： 流式布局和rem布局

    liveapp场景应用,一般针对的是移动端,近来也是很火,颇有一些感受,拿来分享一下. 页面宽度范围: 一般移动端页面我们的像素范围是320px-640px,最大640px,最小320px,所以设计稿 ...

  6. 为什么要用rem

    为什么要用rem 参考文章web app变革之rem 公司使用的375*667(也就是iPhone6)作为缩放比例标准,设计师是按照750px的标准出图 为了保证在不同的屏幕下显示效果基本等同,为此规 ...

  7. 单位px 转换成 rem

    <script type="text/javascript"> var oHtml = document.documentElement; getSize(); win ...

  8. 批处理命令——rem 和 pause

    [1]rem命令简介 注释命令,在C语言中相当于/*----------*/,它并不会被执行,只是起到一个注释的作用,便于别人及自己将来阅读和维护脚本. 为了更具体的理解,请看示例: 新建一个文本文件 ...

  9. C#创建自定义配置节点

    转载:http://www.educity.cn/develop/495003.html 在.Net应用程序中我们经常看到VS为我们生成的项目工程中都会含有app.config或者web.connfi ...

随机推荐

  1. Python os.remove() 删除文件

    概述 os.remove() 方法用于删除指定路径的文件.如果指定的路径是一个目录,将抛出OSError. 在Unix, Windows中有效 语法 remove()方法语法格式如下: os.remo ...

  2. 【转】Java内部类详解

    一.内部类基础 在Java中,可以将一个类定义在另一个类里面或者一个方法里面,这样的类称为内部类.广泛意义上的内部类一般来说包括这四种:成员内部类.局部内部类.匿名内部类和静态内部类.下面就先来了解一 ...

  3. PDB文件详解

    原文地址:http://blog.csdn.net/feihe0755/article/details/54233714 PDB文件的介绍 PDB(Program Data Base),意即程序的基本 ...

  4. linux c 时间函数

    1. time() 函数提供了 秒 级的精确度 time_t time(time_t * timer) 函数返回从UTC1970-1-1 0:0:0开始到现在的秒数 2. struct timespe ...

  5. java8 常用函数式接口

    public static void main(String[] args) { // TODO Auto-generated method stub //函数式接口 Function<Inte ...

  6. VI编辑器、ipython、jupyter及进程知识总结

    一.VI编辑器 1.三种模式 一般模式(normal mode 默认) 插入模式(insert mode) 末行模式(last line mode) 2.模式切换 一般模式-------------- ...

  7. 浅谈深度优先和广度优先(scrapy-redis)

    首先先谈谈深度优先和广度优先的定义 深度优先搜索算法(英语:Depth-First-Search,DFS)是一种用于遍历或搜索树或图的算法.沿着树的深度遍历树的节点,尽可能深的搜索树的分支.当节点v的 ...

  8. python-元类的几种单例模式

    单例介绍: 单例即单个的实例,指的是同一个类实例化多次的结果都是指向同一个对象,用于节省内存空间 如果我们从配置文件中读取配置信息来进行实例化,在配置相同的情况下,就没必要重复产生对象浪费内存了. # ...

  9. Swift 学习- 03 -- 基本运算符

    // 运算符是检查,改变,合并值的特殊符号或短语, // swift 支持大部分标准的 C语言的运算符, 且改进许多特性来减少常规编码错误. /* 如: 赋值符 (=) 不返回值, 以防止把想要判断相 ...

  10. Windows7上完全卸载Oracle 12c操作步骤

    注:本文来源于:< Windows7上完全卸载Oracle  12c操作步骤 > 1.关闭Oracle所有的服务,按[win+R]运行[services.msc]找到所有Oracle开头的 ...