长度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要换算成物 ...
随机推荐
- kali下安装中文输入法
参考网址:https://blog.csdn.net/qq_37367124/article/details/79229739 更性源 vim /etc/apt/source.list 设置更新源 更 ...
- 《零基础入门学习Python》【第一版】视频课后答案第001讲
测试题答案: 0. Python 是什么类型的语言? Python是脚本语言 脚本语言(Scripting language)是电脑编程语言,因此也能让开发者藉以编写出让电脑听命行事的程序.以简单的方 ...
- Python9-进程池-day38
复习 # 信号量 from multiprocessing import Semaphore # 用锁的原理实现的,内置了一个计数器 # 在同一个事件,只能有指定数量的进程执行某一段被控制住的代码 # ...
- proc_info_list
内核中每种处理器架构抽象为一个proc_info_list结构体,在arch/arm/include/asm/procinfo.h中定义, struct proc_info_list { unsign ...
- LeetCode(238) Product of Array Except Self
题目 Given an array of n integers where n > 1, nums, return an array output such that output[i] is ...
- Statues CodeForces - 129C(bfs)
In this task Anna and Maria play a game with a very unpleasant rival. Anna and Maria are in the oppo ...
- JVM执行子系统探究——类文件结构初窥
类文件(.class)是搞java的都非常熟悉的文件,一般我们在编写java之后文件之后,首先通过javac工具生成.class类字节码文件,而后在执行程序的时候由虚拟机加载执行.那么为什么要生成.c ...
- flask-mail(qq邮箱)
from flask_mail import Mail,Message app.config['MAIL_SERVER']='smtp.qq.com' app.config['MAIL_PORT'] ...
- 在终端更改MAC的MySQL的root密码
- 如何解决自定义404页面在IE等浏览器中无法显示问题
网站设置自定义404页面之后(如何在IIS下正确设置404页面?),如无法在浏览器中正常显示,可能是以下原因: 1.404页面文件权限设置错误 我们需要为404页面文件添加上用户everyone的可读 ...