<!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. C# 操作文件类，文件夹存在判断，创建，文件内容读写。

    此篇文档是老早就放到草稿箱中了,断断续续编辑了几次.结合自己经常用到的对于文件的操作,结合msdn做此文. 1.File 类 --转自msdn 常用方法: 名称 说明 AppendAllLines(S ...

  2. 题解-hzy loves segment tree I

    Problem 题目概要:给定一棵 \(n\) 个节点的树,点有点权,进行 \(m\) 次路径取\(\max\)的操作,最后统一输出点权 \(n\leq 10^5,m\leq 5\times 10^6 ...

  3. NDK历史版本下载方法

    再比如说,你要下载Android NDK, Revision 8b ,只要下面链接就可以了: http://dl.google.com/android/ndk/android-ndk-r8b-Linu ...

  4. MinGW GCC 7.1.0 2017年6月份出炉啦

    MSYS_MinGW-w64_GCC_710_x86-x64_Full.7z 发布日期: 2017-06-03 18:33 69.4M 下载地址: http://xhmikosr.1f0.de/too ...

  5. 无备份mysql删除表后恢复

    mysql从5.6.17开始自动设置innodb_file_per_table为on,每个表设置单独表空间,数据不是集中存放在ibdata1里.下面测试下无备份后drop表后的恢复. 前奏生成数据字典 ...

  6. Stetho简化Android调试(一)

    在开发 Android 应用的时候,有时候我们需要查看数据库.SharePreference等.通常的做法是把相关文件pull出来,而前提必须是手机得root.如果没有root,那就只能通过打印或其它 ...

  7. Math中的floor,round和ceil方法总结

    floor向下取整,返回不大于的最大整数  Math.floor(1.4)=1.0ceil向上取整,返回不小于的最小整数  Math.ceil(1.4)=2.0round 四舍五入,将原来的数字加入0 ...

  8. Confluence 6 站点高级自定义

    你可以继续编辑的全局布局文件来继续更新你的主面板.请查看 Customizing the Confluence Dashboard 页面来获得更多有关的信息.你需要具有一些基本的Velocity 知识 ...

  9. Ionic 2: ReferenceError: webpackJsonp is not defined

    I'm new to Ionic. I have started project with super template. But when I try to run the app in brows ...

  10. 高并发编程基础Synchronized与Volatile

    关键字Synchronized: 当使用Synchrnized (o) ,锁定 o 的时候,锁定的是 o 指向的堆内存中 new 出来的对象,而非 o 引用,当锁定 o 以后,一旦 o 指向了其他对象 ...