长度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>

  

时间: 2024-08-05 13:32:14

长度rem的使用的相关文章

https证书

PKCS全称是Public-Key Cryptography Standards是由RSA实验室与其它安全系统开发商为促进公钥密码的发展而制订的一系列标准PKCS目前共发布过15个标准.常用的有:PKCS#12.X.509.所有的证书都符合为Public Key Infrastructure (PKI) 制定的ITU-T X509国际标准. PKCS#12 [用于存放个人证书,含私钥] 常用的后缀有:.p12 .pfxX.509 [用于存放个人证书,不含私钥] (ASCII编码)(D)常用的后缀

css中的px、em、rem 详解

概念介绍: 1.px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时一般都有DPI可选.Windows系统默认是96dpi,Apple系统默认是72dpi. 2.em(相对长度单位,相对于当前对象内文本的字体尺寸):是一个相对长度单位,最初是指字母M的宽度,故名em.现指的是字符宽度的倍数,用法类似百分比,如:0.8em, 1.2em,2em等.通常1em=16px

前端页面适配的rem换算

为什么要使用rem 之前有些适配做法,是通过js动态计算viewport的缩放值(initial-scale). 例如以屏幕320像素为基准,设置1,那屏幕375像素就是375/320=1.18以此类推. 但直接这样强制页面缩放过于粗暴,会导致页面图片文字失真模糊. Px是相对固定单位,字号大小直接被定死,所以用户无法根据自己设置的浏览器字号而缩放,em和rem虽然都是相对单位,但em是相对于它的父元素的font-size,页面层级越深,em的换算就越复杂,而rem是直接相对于根元素,这就避开了

CSS px, em, 和rem; float以及clear(第一篇学习)

px:相对长度,相对于屏幕分辨率: em:相对长度单位,相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸.  任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合: 1em=16px.那么12px=0.75em,10px=0.625em.为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样 12px=1.2em, 10px=1em

px,em,rem的区别

1.px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时一般都有DPI可选.Windows系统默认是96dpi,Apple系统默认是72dpi. 2.em(相对长度单位,相对于当前对象内文本的字体尺寸):是一个相对长度单位,最初是指字母M的宽度,故名em.现指的是字符宽度的倍数,用法类似百分比,如:0.8em, 1.2em,2em等.通常1em=16px.为了简化f

px,em,rem,vw单位在网页和移动端的应用

px: 是网页设计中最常用的单位,然而1px到底是多大长,恐怕没有人能回答上来 它用来表示屏幕设备物理上能显示的最小的一个点,这个点不是固定宽度的,不同设备上点的长度.比例有可能会不同. 假设:你现在用的显示器上1px宽=1毫米,但我用的显示器1px宽=两毫米,那么你定义一个div宽度为100px,你显示器上看这个div是10厘米,我显示器上看是20厘米.另外一个px点的长度不一定是1:1的正方形,有的设备上长度比是不一样的. 更多px信息点此博客. px的兼容性:需要注意的是谷歌浏览器最小可以

用rem来做响应式开发

由于最近在做公司移动项目的重构,因为要实现响应式的开发,所以大量使用到了rem的单位,觉得这个单位有点意思.但是现在貌似用他的人很少.上一篇文章我分享了淘宝写的一篇rem的介绍,介绍的非常全面,但是他们似乎都把关注点放在了字体单位上了,其实rem不只是能应用到字体上面,还可以应用到长度和宽度上面,接下来看下我做的一个项目的首页吧. Demo 由于这个项目我设置了最大的宽度限制是640px,最小限制是320px,大家可以改变浏览器的分辨率或者通过手机访问看看效果.基本上在不同分辨率下都是差不多的展

css中em和rem的区别

在css中单位长度用的最多的是px.em.rem,这三个的区别是:1.px是固定的像素,一旦设置了就无法因为适应页面大小而改变.2.em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定死了的,更适用于响应式布局. 对于em和rem的区别一句话概括:em相对于父元素,rem相对于根元素.rem中的r意思是root根. em:1.子元素字体大小的em是相对于父元素字体大小2.元素的width/height/padding/margin用em的话是相对于该元素的font-size

以iphone6plus 为标准单位是px的页面 在运行时转换为rem

在页面中引入以下代码,把样式中带px单位的样式放到本页面中的<style>标签中 /** * Created by Administrator on 2017-03-14. */ /*************************************设置页面rem的长度***START***************************************/ var num=screen.width;//获取屏幕的宽度 var font=num/10;//把宽度分成10份 docu