<!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. Python3学习笔记33-正则表达式

    学习文章传送门 正则表达式是用来匹配字符串的.只要符合规则的字符串.就可以认为匹配了.否则,这个字符串不合法. \d:可以匹配一个数字     ‘00\d’可以匹配001不能匹配00A \w:可以匹配 ...

  2. bzoj 1175： The stairways of Saharna

    一道杨氏矩阵的题,萌新初入门,还不是很懂,这篇 blog 讲的超级好(就是看图有点麻烦) 据说这玩意儿可以代替堆和平衡树用,支持插入.删除.查询,跑得还挺快的(慢着,复杂度好像是 n^2 ? 而且空间 ...

  3. Light OJ 1102

    题意: 给你一个数 N , 求分成 K 个数 (可以为 0 ) 的种数: 思路: 类似 在K个抽屉放入 N 个苹果, 不为0, 就是 在 n-1 个空隙中选 m-1个: 为 0, 就可以先在 K 个抽 ...

  4. python 前面几个单词含义

    切片 str[start:end:step] start:从xxx开始    (startswith) end:切到xxx为止  (endswith) 不包括 字符串操作 .capitalize()# ...

  5. nodejs和ionic小助手

    nodejs已经安装完成的情况下,安装ionic小助手 win+r打开cmd. 命令: 1.node -v(查看版本信息) 2.npm -v(查看版本信息) 3.npm install -g cnpm ...

  6. R-CNN,SPP-NET, Fast-R-CNN,Faster-R-CNN, YOLO, SSD系列

    就是想保存下来,没有其他用意 原博文:http://blog.csdn.net/qq_26898461/article/details/53467968 3. 空间定位与检测     参考信息< ...

  7. C++ 解析Json——jsoncpp（转）

    原文:https://www.cnblogs.com/liaocheng/p/4243731.html JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,和 ...

  8. 1873: This offer（zzuli）

    题目描述 话说WX入职已经有一个多月了,公司boss突然扔给他了一个问题,如果解决不了的话就会被开除掉 - -#,情急之下他只能来请教你了,boss给了他N个不大于100的数,现在wx需要将这N个数通 ...

  9. bzoj 1951

    这道题告诉了我们一个很重要的道理:看到题,先想明白再动手! 题意:求对999911659取模的值 首先,由于n的数据范围不是很大(至少不是很大),所以可以O()枚举所有约数分别求组合数 但是有个问题: ...

  10. C++ Primer 笔记——类

    1.定义在类内部的函数是隐式的inline函数. 2.因为this的目的总是指向“这个”对象,所以this是一个常量指针,我们不允许改变this中保存的地址. 3.常量成员函数:允许把const关键字 ...