<!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. redis启动异常

    在官网上下载redis包,解压后启动. 启动redis报下面的错误! *** FATAL CONFIG FILE ERROR *** Reading the configuration file, a ...

  2. CFileFind

    1.CFileFind类的声明文件保存在afx.h头文件中.2.该类的实现的功能:执行本地文件的查找(查找某个具体的文件,查找某类文件x*.x*,查找所有文件*.*)3.CFileFind类是CGop ...

  3. VC中的字符串转换宏

              ATL7.0引入了几个新的转换类和宏,现有的宏提供了显着的改善.新的字符串转换类和宏的名称,采取的形式如下: C SourceType [C]DestinationType[EX] ...

  4. Record && Limit

    案例一:Record 预期效果:在 IVR 与用户交互的时候,比如让用户读一段语音,当用户读完之后,按键结束录音. <action application="set" dat ...

  5. AMQP消息队列之RabbitMQ简单示例

    前面一篇文章讲了如何快速搭建一个ActiveMQ的示例程序,ActiveMQ是JMS的实现,那这篇文章就再看下另外一种消息队列AMQP的代表实现RabbitMQ的简单示例吧.在具体讲解之前,先通过一个 ...

  6. Socket实现断线重连

    客户端维护一个线程安全的待发送信息队列   开启死循环   判断Socket = null   调用Socket的sendUrgentData(0xFF)发送1个字节的心跳包   捕捉到连接异常后就关 ...

  7. C# 操作Excel加水印

    首先下载免费版的Excel组件- Spire.XLS,安装完成后在bin目录里面有需要用到的dll文件,引用到自己项目里面. 我这里全引进来了,一共就四个: 界面 效果 全部代码 private st ...

  8. CSS 三角形与圆形

    1. 概述 1.1 说明 通过边框(border)的宽度与边框圆角(border-radius)来设置所需的三角形与圆形. 1.2 边框 宽高都为0时,边框设置的不同结果也不同,如下: 1.四个边框都 ...

  9. JavaScript 输入小数点(event.key或event.code)

    1. 概述 1.1 说明 在开发过程中,有时候需要仅输入数字与小数,故记录下使用过的功能,以便后期使用. 1.2 key 定义:按下按键时返回的标识符,按键标识符是表示键盘按钮的字符串(如1,2,a等 ...

  10. python 启动虚拟环境

    假设你有两个Python项目-A和B,这两个项目都需要使用同一个第三方模块-tensorflow.如果这两个项目使用相同的tensorflow版本,也许不会有什么问题. 但是,当A和B项目使用不同的t ...