长度rem的使用
<%@ 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的使用的更多相关文章
- 通过SVN获取变更列表,得到对应的最新class
通过本地SVN获得未提交的文件列表获取工程中最新的class的方式参考: 增量部署代码利用批处理命令按原始结构复制指定的文件 新写了一个增强版,根据已提交至SVN的代码loglist,获取最新的cla ...
- Sublime 插件- px 转rem
一个CSS的px值转rem值的Sublime Text 3自动完成插件. 插件效果如下: 安装 克隆项目 https://github.com/hyb628/cssrem.git 进入packag ...
- 用rem实现WebApp自适应的优劣分析
关于rem实现屏幕自适应布局的讨论还是比较多的,刚好我也看到使用rem实现自适应的web app,所以也来凑下热闹. 说起rem,免不了要联系到em.px,这里简单提提他们的定义和特点. 1. px: ...
- 好用的px转rem的插件
一个CSS的px值转rem值的Sublime Text 3自动完成插件. 下载地址: https://github.com/flashlizi/cssrem 安装 下载本项目,比如:git clone ...
- 了解真实的『REM』手机屏幕适配
rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The ...
- 深度讲解VIEWPORT和PX是什么?移动端单位px,em,rem
刚开始接触移动页面重构,是不是很迷惑应该按照多大的尺寸制作?320.640还是720?按照640的设计稿重构完页面,是不是还需要写其他尺寸来适配不同的屏幕大小?—— 这源于对viewport和px的不 ...
- css之px自动转rem—“懒人”必备
作为一名前端开发,尤其是在做移动端适配时,rem是我们经常用到的单位,它的好处大家可以自行搜索,网上已经有很多了.但是我们再将设计稿上的px转换成rem时,得手动的去计算,这是一个很耗时.费力的过程, ...
- css中的px、em、rem 详解
概念介绍: 1.px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时 ...
- px,pt,em,rem
一直对px,pt,em,rem的认识有误区,现整理一下,供参考.之后还得整理下关于dpi相关的知识. px(pixe,像素l):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物 ...
随机推荐
- Android深度探索总结
Android深度探索前四章总结 通过这几章的学习真实体会到“移植”的概念:为特定设备定制Android的过程,但是移植的过程中开发最多的就是支持各种硬件设备的Linux驱动程序,本章对Android ...
- C++ string头文件
转载自https://blog.csdn.net/superna666/article/details/52809007/ 作者 zhenzhenjiajia888 标准c++中string类函数介绍 ...
- CF-1143D. The Beatles
题意:有间隔为k的n个点在数轴上,下标为 \(1,k+1, 2*k+1,\cdots (n-1)*k+1\) 首尾相接.设起点为s,步长为L,而现在只知道s距离最近的点的距离为a,和(s+L)距离最近 ...
- 序列内置方法详解(string/list/tuple)
一.常用方法集合 1.1.string,字符串常用方法 以下举例是python2.7测试: 函数名称 作用 举例 str.capitalize() 字符串第一个字符如果是字母,则把字母替换为大写字母. ...
- day24 02 单继承(派生)
day24 02 单继承(派生) 1.首先来看一个简单的例子 比如: 狗类的属性有:吃,喝,看门 鸟类的属性有:吃,喝,下蛋 看门和下蛋就是这两种动物不同的属性,而吃喝是两个共同的属性 以下代码实现了 ...
- guava笔记
guava是在原先google-collection 的基础上发展过来的,是一个比较优秀的外部开源包,最近项目中使用的比较多,列举一些点.刚刚接触就被guava吸引了... 这个是gua ...
- 中国电信物联网平台入门学习笔记2: DOME程序分析
"墨子号NB-IOT开发板"提供的dome: 程序只要分为延时,定时器,串口通讯…… 工程文件在:…\STM32L1xx_StdPeriph_Lib_V1.3.1\Project\ ...
- python列表中的深浅copy
列表中的赋值和平常的赋值是不一样的,看下面的代码: In [1]: a = 1 In [2]: b = a In [3]: a Out[3]: 1 In [4]: b Out[4]: 1 In [5] ...
- V4L2使用V4L2_MEMORY_USERPTR和V4L2_MEMORY_MMAP的区别
视频应用可以通过两种方式从V4L2驱动申请buffer 1. USERPTR, 顾名思义是用户空间指针的意思,应用层负责分配需要的内存空间,然后以指针的形式传递给V4L2驱动层,V4L2驱动会把cap ...
- java静态代理模式
代理模式分为动态代理和静态代理. 静态代理简述: 1.为其他对象提供一种代理,以控制对这个对象的访问. 2.代理对象会起到中介的作用,可以增加些功能,也可以去掉某些功能. 静态代理: 代理和被代理对象 ...