最简单的方式实现rem布局
加上如下js,px转换成rem需要手动,计算方式:量的大小除以100,就等于rem,例如:量的设计稿元素宽度是120,那么就写成{width: 1.2rem},这样写有什么问题,待研究,也欢迎补充
<!DOCTYPE html>
<html lang="en" style="font-size:100px">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
function resetFontSize() {
var baseFontSize = 100
var designWidth = 750
var width = window.innerWidth
var currentFontSize = (width / designWidth) * baseFontSize
document.getElementsByTagName('html')[0].style.fontSize = currentFontSize + 'px'
}
window.onresize = function () {
resetFontSize()
};
resetFontSize()
</script>
<style>
*{
padding:0;
margin:0;
}
body{
overflow: auto;
font-size: .28rem;
}
.box{
width:7.5rem;
height: 1rem;
background: #000;
} </style>
</head>
<body>
<div class="box"></div>
<p>42341</p> </body>
</html>
最简单的方式实现rem布局的更多相关文章
- (淘宝无限适配)手机端rem布局详解(转载非原创)
从网易与淘宝的font-size思考前端设计稿与工作流 本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问 ...
- 关于移动端 rem 布局的一些总结
[资源一]基础知识恕不回顾 基础知识参考以下两篇博客: http://isux.tencent.com/web-app-rem.html http://www.w3cplus.com/css3/def ...
- 手机端页面自适应解决方案—rem布局进阶版
手机端页面自适应解决方案—rem布局进阶版 https://www.jianshu.com/p/985d26b40199 注:本文转载之处:https://www.cnblogs.com/anni ...
- (淘宝无限适配)手机端rem布局详解
从网易与淘宝的font-size思考前端设计稿与工作流 本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问 ...
- rem布局原理深度理解(以及em/vw/vh)
一.前言 我们h5项目终端适配采用的是淘宝那套<Flexible实现手淘H5页面的终端适配>方案.主要原理是rem布局.最近和别人谈弹性布局原理,发现虽然已经使用了那套方案很久,但是自己对 ...
- 细说移动端 经典的REM布局 与 新秀VW布局
和以往一样,本次项目也放到了 Github 中,欢迎围观 star ~ 1. 前言 2. 基本概念 3. REM布局 4. VW布局 实现单边边框1px 实现多边边框1px 实现边框圆角 实现容器固定 ...
- 第132天:移动web端-rem布局(进阶)
rem布局(进阶版) 该方案使用相当简单,把下面这段已压缩过的 原生JS(仅1kb,源码已在文章底部更新,2017/5/3) 放到 HTML 的 head 标签中即可(注:不要手动设置viewport ...
- 第130天:移动端-rem布局
一.关于布局方案 当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配.之前介绍了一篇关于 ...
- 手机端页面自适应解决方案—rem布局(进阶版,附源码示例)
转自:https://segmentfault.com/a/1190000007350680 一年前笔者写了一篇 <手机端页面自适应解决方案—rem布局>,意外受到很多朋友的关注和喜欢.但 ...
随机推荐
- jmeter也能做Webservice接口测试
百度到天气预报接口:http://www.webxml.com.cn/WebServices/WeatherWebService.asmx?wsdl 新增RPC接口线程 调取的参数及调取天气结果的显示 ...
- linux安装软件时/usr/lib/python2.7/site-packages/urlgrabber/grabber.py文件异常
linux安装软件时,经常出现以下异常信息 Traceback (most recent call last): File , in <module> main() File , in m ...
- 取得远端相应Json并转化为Java对象一
JDK:1.8.0_212 IDE:STS4(Spring Tool Suit4 Version: 4.3.2.RELEASE) 工程下载:https://files.cnblogs.com/file ...
- 转贴 使用正则表达式解析一般sql语句(C++)
https://blog.csdn.net/dreamgchuan/article/details/47715743 --END--2019年9月5日11点58分
- Android通过JNI实现守护进程与卸载后跳转指定网页
JNI进程守护 c代码部分如下:JNIEXPORT void JNICALL Java_com_sharetimes_qude_jni_JNIDaemon_daemon(JNIEnv * env, j ...
- 转发:Java对象及其引用
原文: http://zwmf.iteye.com/blog/1738574 Java对象及其引用 关于对象与引用之间的一些基本概念. 初学Java时,在很长一段时间里,总觉得基本概念很模糊.后来才知 ...
- Linux批量文件管理
Linux批量文件管理 实验目标: 通过本实验掌握批量建立.移动.复制文件或目录的操作,也可以作为后续shell编程的基础. 实验步骤: 1.现在有十台终端机器,要为每台机器建立3个文件,总共要建 ...
- 2019年icpc区域赛银川站总结
目录 一.前言 二.10月19日热身赛 三.10月20日正式赛 四.结果 一.前言 比赛前我们队有ccpc厦门和icpc银川的名额,然而这两个地区的时间正好撞了,考虑到银川更容易拿奖,加上我们ACM协 ...
- python(递归实例)
摘要:在学习python递归知识点时,总是一知半解,似懂非懂的..在反复看视频翻资料同时,也收集案例来分析求证..通过分析下面几个案例希望能有所帮助!!! 1.用递归的方法实现阶乘... def nu ...
- (转) pip Fatal error in launcher: Unable to create process using
接上篇“Eclipse启动报错:JVM terminated. Exit code=2”,今天把Python的安装位置也从C盘剪切到了D盘, 然后修改了Path环境变量中对应的盘符:D:\Python ...