手机端适配rem代码片段
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script> function getRem (){
var currentWidth = document.documentElement.clientWidth;
var fontSize = 100;
var width = 320;
var currentFontsize = currentWidth / width * fontSize;
document.querySelector('html').style.fontSize = currentFontsize + 'px';
}
getRem();
window.onresize = function(){
getRem();
}
</script>
<style>
p {
font-size: 1rem;
}
</style>
<body>
<p>测试</p>
</body>
</html>
手机端适配rem代码片段的更多相关文章
- 关于手机端适配的问题(rem,页面缩放)
关于手机端适配的问题(rem,页面缩放) 96 进击的小前端 关注 2018.02.02 13:57 字数 320 阅读 19评论 0喜欢 0 相信很多和会和我碰到一样的情况,就是你用rem去写移动端 ...
- 手机端使用rem适配
最近一直在做手机端的东西,各种型号的手机适配很是无解.经过同事及百度找到了这么一个方法 html font-size默认100px 将rem进行换算1px==0.01rem; 页面在各个手机适配个别会 ...
- 手机端页面rem自适应脚本
什么是rem 参照 web app变革之rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值.所以改变html节点的fontsize是最为关键的一步.根据手机宽度改变相对 ...
- 手机端布局rem 与vm的使用
手机端原来的时候,在项目中使用js判断出html的字体,然后根据rem设置字体,但是js本着少用的原则,考虑用vm,vh等(顺带说一句,vm vh是网页可视区域宽度 高度 即浏览器宽度减去约16px) ...
- 自动PC端显示 手机端隐藏CSS代码判断实现
实现场景描述: 有些内容部署在PC端但是有不适合在手机端显示(比如盒子过大,遮挡内容)或者手机端显示毫无意义等.我们可以使用下面的代码来实现:电脑端显示,手机端隐藏 实现方法: CSS控制判断 @me ...
- h5 手机端适配问题汇总
1.uc手机浏览器竟然没有 sessionstorage 醉了 2.opera 浏览器 能识别 a标签中href的 javascript:; 为网址 , 55555 3.safari 的弹框如 ...
- 适配手机端之 rem
(function() { var psdWidth = 1080, maxRem = 100, ch = document.documentElement.clientHeight || docum ...
- rem手机端适配
<script> document.documentElement.style.fontSize=document.documentElement.clientWidth*100/750+ ...
- 手机端使用rem的适配
<html> <body> <!-- http://www.w3cfuns.com/notes/29143/79dafb7c07f6865f435af641869d312 ...
随机推荐
- H265 Rtp封包
H265 Rtp封包可以参考Ffmpeg,具体实现在文件rtpenc_h264_hevc.c(4.0.1版本),核心的方法是nal_send 这个方法有些绕,下面帖子具体的代码及注释. static ...
- 浅析VS2010反汇编 VS 反汇编方法及常用汇编指令介绍 VS2015使用技巧 调试-反汇编 查看C语言代码对应的汇编代码
浅析VS2010反汇编 2015年07月25日 21:53:11 阅读数:4374 第一篇 1. 如何进行反汇编 在调试的环境下,我们可以很方便地通过反汇编窗口查看程序生成的反汇编信息.如下图所示. ...
- linux下的3种DDOS软件介绍
什么是TFN2K? TFN2K 的作者是著名的德国黑客mixter. http://mixter.void.ru/papers.html TFN2K通过主控端利用大量代理端主机的资源进行对一个或多个目 ...
- Linux 查看tomcat占用的端口号
第一步:先查看tomcat占用的进程号 ps -ef|grep tomcat 第二步:根据进程号,查看进程所占用的端口 netstat -apn 由此得知,tomcat的进程号是21845,并得到端口 ...
- Android Java 线程池 ThreadPoolExecutor源代码篇
线程池简单点就是任务队列+线程组成的. 接下来我们来简单的了解下ThreadPoolExecutor的源代码. 先看ThreadPoolExecutor的简单类图,对ThreadPoolExecuto ...
- 【ubantu】在ubantu下如何对svn进行操作命令
ubantu对svn进行操作命令,如下所示: 1.将文件checkout到本地目录svn checkout path(path是服务器上的目录)例如:svn checkout svn://192.16 ...
- vue2 本地安装
- React Native安装步骤
先贴出中文网安装指南:http://reactnative.cn/docs/0.46/getting-started.html 本文会点出一些安装时遇到的坑,和解决方案! 1.首先是安装Chocola ...
- git介绍和常用指令
Git介绍和常用指令 介绍:Git和SVN一样都是版本控制工具.不同的是Git是分布式的,SVN是集中式的.Git开始用可能感觉难点,等你用习惯了你就会觉得svn是有点恐怖.(如果一个项目有好多人一起 ...
- csv文件的格式
csv, comma separated values csv是一种纯文本文件. csv文件由任意数目的记录构成,记录间以换行符分割,每条记录由字段构成,字段间以逗号作为分隔符. 如果字段中有逗号,那 ...