移动端rem与px适应js
方法一:
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
recalc = function () {
var clientWidth = docEl.clientWidth;
//var foot = document.getElementById("foot");
if (!clientWidth) return;
if (clientWidth<640){
docEl.style.fontSize = 120 * (clientWidth / 640) + "px";
console.log(120 * (clientWidth / 640) + "px");
}else{
docEl.style.fontSize = "120px";
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
方法二:
var deviceWidth = document.documentElement.clientWidth;
if (deviceWidth > 640) deviceWidth = 640;
document.documentElement.style.fontSize = deviceWidth / 3.75 + 'px';
移动端rem与px适应js的更多相关文章
- 移动端rem处理字体的js代码
(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? ...
- js动态计算移动端rem
在做移动端web app的时候,众所周知,移动设备分辨率五花八门,虽然我们可以通过CSS3的media query来实现适配,例如下面这样: html { font-size : 20px; } @m ...
- 移动端适配方案以及rem和px之间的转换
背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...
- rem与px之间的换算(移动端)
最近因为工作接触到rem与px之间的换算,之前知道一些,不过还是比较笼统模糊,用起来不是很明白,后来自己查了点资料,以及亲自测试总算明白它们之间是怎么换算的了. rem是一个相对值,它相对于根元素ht ...
- HTML-移动端-rem px vw vh 的转换
vw/vh rem px 三者的转换(快速入门移动端页面编写) 1:三种单位的转换 2:如何适配移动端的不同设备 前提知识: 手机端的长宽是实际设计过程中的两倍 比如手机端是 750 * 1200 那 ...
- JS动态计算移动端rem的解决方案
首先介绍下rem 说起rem就的说px,em: PX为单位 在Web页面初期制作中,我们都是使用“px”来设置我们的文本,因为他比较稳定和精确.但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的 ...
- 一看就懂得移动端rem布局、rem如何换算
这里使用了js控制根元素的font-size大小,然后进行rem换算,在js代码后面会说明以下问题. 1.如何进行rem运算? 2.如果纯js控制根元素用rem布局会出现的小问题,如何解决? 3.如有 ...
- 谈谈我的移动端rem适配方案
最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...
- 第130天:移动端-rem布局
一.关于布局方案 当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配.之前介绍了一篇关于 ...
随机推荐
- vultr测速 看看vultr哪个地区节点速度快
很多网友用vultr的机子主要就是为了*** 所以对哪个区域节点的速度就非常在意 网上都说这个区域节点速度快,那个区域节点的速度快. 还是得自己亲自测试才知道哪个区域的速度快! 所以做了个ping本机 ...
- python操作随笔
# -*- encoding: utf-8 -*-import urllib2from bs4 import BeautifulSoupimport re f1 = open('E:/1.txt')l ...
- ubuntu apt-get install 时报错curl : Depends: libcurl4 (= 7.58.0-2ubuntu3.6) but 7.61.0-1ubuntu2 is to be installed或者 vim : Depends: vim-common (= 2:8.0.1453-1ubuntu1) but 2:8.0.1766-1ubuntu1 is to be ins
ubuntu apt-get install 时报错:Depends: ***(=某版本)but***(另一版本)is to be installed 这时候就把这个***给purge后再重新装就好了 ...
- [数据库] windows server 2003下mysql出现10048错误的解决办法 Can't connect to MySQL server on '127.0.0.1' (10048)(抄)
网站访问量大了的时候mysql连接数自然就多了,当超出mysql最大连接数的时候就会出现错误,当出现too many字样的错误的时候一般是因为连接数的问题,只需要修改最大连接数max_conectio ...
- 【BZOJ4029】[HEOI2015]定价(贪心)
[BZOJ4029][HEOI2015]定价(贪心) 题面 BZOJ 洛谷 题解 每次加上十进制下的\(lowbit\)就行了??? #include<iostream> #include ...
- mysql学习基础知识3
1.视图 简化sql语句的编写,限制可以查看的数据 一张虚拟的表,不占任何内存,查视图时都是临时从所查的表中拿数据 特点: 对于视图的增删改查 都会同步到原始表 对原始表的修改,会同步到视图内可查看的 ...
- [HNOI2010]城市建设
[HNOI2010]城市建设 玄学cdq O(nlog^2n)的动态最小生成树 其实就是按照时间cdq分治+剪枝(剪掉一定出现和不可能出现的边) 处理[l,r]之间的修改以及修改之后的询问,不能确定是 ...
- 享元模式-Flyweight(Java实现)
享元模式-Flyweight 享元模式的主要目的是实现对象的共享,即共享池,当系统中对象多的时候可以减少内存的开销,通常与工厂模式一起使用. 本文中的例子如下: 使用享元模式: 小明想看编程技术的书, ...
- 腾讯地图 API 调用入门
本文仅为腾讯地图 API 调用入门,如需进阶学习,请在腾讯位置服务网站上进行学习. 登陆网址 https://lbs.qq.com/ 点击右上角的登陆按钮,需要进行注册按照流程进行就好. 完成之后,选 ...
- Turtle库的学习积累
1.什么是turtle库 Python的Turtle库是一个直观有趣的图形绘制函数库,Turtle英文翻译过来是乌龟的意思,在绘图时可以想象成一只乌龟在移动. 2.绘图坐标体系 海龟的移动方向 3.绘 ...