<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="robots" content="all">
<meta name="format-detection" content="telephone=no" />
<style type="text/css">
*{padding: 0;margin: 0;}
html,body{width:100%;height: 100%;font-family: "Microsoft YaHei"; position: relative;}
.banner{height:230px;width: 414px;background: red}
</style>
<script type="text/javascript"> //var num=$(window).width();
var num= window.innerWidth;
var font=num/10;
document.getElementsByTagName('html')[0].style.fontSize=font+'px'
//$('html').css('font-size',font+'px');
/* window.onresize=function(){
num=$(window).width();
font=num/10;
$('html').css('font-size',font+'px');
} */
</script>
<title>平台</title>
</head>
<body>
<div class="banner">
</div>
<script type="text/javascript">
var html=$('html').html();
var remhtml=html.replace(/(\d+)px/g, function(a,b){
console.log(b)
var num=b/41.4+"";
console.log(num)
return num.substring(0, 5)+"rem";
})
console.log(remhtml);
</script>
</body>
</html>

  

长度rem的使用的更多相关文章

  1. 通过SVN获取变更列表,得到对应的最新class

    通过本地SVN获得未提交的文件列表获取工程中最新的class的方式参考: 增量部署代码利用批处理命令按原始结构复制指定的文件 新写了一个增强版,根据已提交至SVN的代码loglist,获取最新的cla ...

  2. Sublime 插件- px 转rem

    一个CSS的px值转rem值的Sublime Text 3自动完成插件. 插件效果如下: 安装 克隆项目   https://github.com/hyb628/cssrem.git 进入packag ...

  3. 用rem实现WebApp自适应的优劣分析

    关于rem实现屏幕自适应布局的讨论还是比较多的,刚好我也看到使用rem实现自适应的web app,所以也来凑下热闹. 说起rem,免不了要联系到em.px,这里简单提提他们的定义和特点. 1. px: ...

  4. 好用的px转rem的插件

    一个CSS的px值转rem值的Sublime Text 3自动完成插件. 下载地址: https://github.com/flashlizi/cssrem 安装 下载本项目,比如:git clone ...

  5. 了解真实的『REM』手机屏幕适配

    rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The ...

  6. 深度讲解VIEWPORT和PX是什么?移动端单位px,em,rem

    刚开始接触移动页面重构,是不是很迷惑应该按照多大的尺寸制作?320.640还是720?按照640的设计稿重构完页面,是不是还需要写其他尺寸来适配不同的屏幕大小?—— 这源于对viewport和px的不 ...

  7. css之px自动转rem—“懒人”必备

    作为一名前端开发,尤其是在做移动端适配时,rem是我们经常用到的单位,它的好处大家可以自行搜索,网上已经有很多了.但是我们再将设计稿上的px转换成rem时,得手动的去计算,这是一个很耗时.费力的过程, ...

  8. css中的px、em、rem 详解

    概念介绍: 1.px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时 ...

  9. px,pt,em,rem

    一直对px,pt,em,rem的认识有误区,现整理一下,供参考.之后还得整理下关于dpi相关的知识. px(pixe,像素l):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物 ...

随机推荐

  1. Bootstrap 提示工具(Tooltip)插件

    当您想要描述一个链接的时候,使用提示工具插件是一个不错的选择.Bootstrap提示工具插件做了很多的改进,例如不需要依赖图像,而是改变Css动画效果,用data属性来存储标题信息. 用法 提示工具( ...

  2. oracle centos 重启后报错ORA-12514, TNS:listener does not currently know of service requested in connect descriptor

    oracle centos 重启后报错ORA-12514, TNS:listener does not currently know of service requested in connect d ...

  3. 配置Xcode的Device Orientation、AppIcon、LaunchImage

    以下图片指出的 TARGETS→General 面板的信息. 下面我们讲讲根据 APP 需求配置我们的Xcode: 1.设置 Device Orientation,指定 APP 支持设备的方向 ,我们 ...

  4. destoon 数据库操作

    1.插入数据 $db->query("INSERT INTO ".get_table($mid)." ($sqlk) VALUES ($sqlv)");  ...

  5. Yii2 HelloWord

    一.安装Yii2 可以直接官网或github下载: https://github.com/yiisoft/yii2 下载完后进入项目的web/目录,入口文件为该目录下的index.php,这里直接启用 ...

  6. PTA 7-1 银行业务队列简单模拟

    用链表实现队列操作,代码如下: #include <iostream> #include <cstdio> #include <algorithm> #includ ...

  7. LightOj:1030-Discovering Gold(期望dp模板)

    传送门:http://www.lightoj.com/volume_showproblem.php?problem=1030 Discovering Gold Time Limit: 2 second ...

  8. The 2018 ACM-ICPC China JiangSu Provincial Programming Contest J. Set

    Let's consider some math problems. JSZKC has a set A=A={1,2,...,N}. He defines a subset of A as 'Meo ...

  9. P2014 选课(树形背包)

    P2014 选课 题目描述 在大学里每个学生,为了达到一定的学分,必须从很多课程里选择一些课程来学习,在课程里有些课程必须在某些课程之前学习,如高等数学总是在其它课程之前学习.现在有N门功课,每门课有 ...

  10. apache php 多站点配置 重新整理

    需要下载的东东:apache_2.0.59-win32-x86-no_ssl.msi  (服务器软件,用来编译PHP的) php-5.1.5-Win32.zip  (PHP的主文件) 第一步:1.安装 ...