<!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. centos6.9安装crontab

    yum install vixie-cron crontabs //安装 chkconfig crond on //开机自启动 service crond start //启动 然后就是执行 cron ...

  2. percona-xtrabackup工具实现mysql5.6.34的主从同步复制

    percona-xtrabackup工具实现mysql5.6.34的主从同步复制 下载并安装percona-xtrabackup工具 # wget https://www.percona.com/do ...

  3. Light OJ 1116

    基础数学:.. #include<bits/stdc++.h> using namespace std; typedef unsigned long long ULL; int main( ...

  4. spark-streaming集成Kafka处理实时数据

    在这篇文章里,我们模拟了一个场景,实时分析订单数据,统计实时收益. 场景模拟 我试图覆盖工程上最为常用的一个场景: 1)首先,向Kafka里实时的写入订单数据,JSON格式,包含订单ID-订单类型-订 ...

  5. HttpServletResponse设置下载文件

    // path是指欲下载的文件的路径.            File file = new File(path);            // 取得文件名.            String fi ...

  6. bootstrap栅格系统中同行div高度不一致的解决方法

    通过div底部的margin和padding实现,缺点:下边框无法完整显示,建议在无边框情况下使用 .row{ overflow: hidden; } [class*="col-" ...

  7. redhat7.3 superset的离线安装

    superset是一个python 开发的可视化工具,可以与kylin连接进行数据分析,在官网的讲解中,采用了在线安装方式,生产环境中有yum源,但是没有网,不得不采用离线安装方式.(我们先在有网的环 ...

  8. centos6.5 python命令行模式左右建无法使用

    我的虚拟机是centos6.5,自带python2.6:安装了Python2.7(安装了pip管理工具)后,在python2.7命令行模式下,左右键及退格键无法使用,基于以上情况,我进行了百度: 第一 ...

  9. 'mysql' 不是内部或外部命令，也不是可运行的程序或批处理文件

    今天安装完MYSQL8.0的版本,根据课本的提示,在CMD里运行,出现了'mysql' 不是内部或外部命令,也不是可运行的程序或批处理文件.在网上搜了一下,他的解决方法是这样的: 1.设置一下环境变量 ...

  10. Confluence 6 配置管理员联系页面

    管理员联系页面是一个格式化的页面,这个页面能够允许 Confluence 用户在 Confluence 中向管理员发送消息(在这部分的内容,管理员是默认管理员用户组的成员). 有关用户组的解释,请参考 ...