移动端设置字体px转换rem的脚本
(function (){
var _self = this;
_self.width = 640;//设置默认最大宽度
_self.fontSize = 100;//默认字体大小
_self.widthProportion = function(){var p = (document.body&&document.body.clientWidth||document.getElementsByTagName("html")[0].offsetWidth)/_self.width;return p>1?1:p<0?0:p;};
_self.changePage = function(){
document.getElementsByTagName("html")[0].setAttribute("style","font-size:"+_self.widthProportion()*_self.fontSize+"px !important");
}
_self.changePage();
window.addEventListener('resize',function(){_self.changePage();},false);
})();
移动端设置字体px转换rem的脚本的更多相关文章
- 淘宝、网易移动端 px 转换 rem 原理,Vue-cli 实现 px 转换 rem
在过去的一段时间里面一直在使用Vue配合 lib-flexible和px2rem-loader配合做移动端的网页适配.秉着求知的思想,今天决定对他的原理进行分析.目前网上比较主流使用的就是淘宝方 ...
- 在线px转换rem工具
今天推荐一个在线工具,在线px转换rem工具 只要输入1rem = 多少px即可在线转换 和cssrem插件差不多的功能 rem在线转换工具: http://www.ofmonkey.com/fr ...
- hbuilder设置自动px 转换成rem
hbuilder里面有自动换算的 需要设置一下:工具–>选项–>Hbuilder–>代码助手设置.里面有个px自动转rem设置,按自己的实际情况设置就可以在每次输入px的时候有提示了 ...
- Vue开发中的移动端适配(px转换成vw)
1.项目根目录下,创建 .postcssrc.js 文件. 2.安装插件. -D (开发依赖) postcss-import postcss-url cssnano-preset-advanced - ...
- vue-cli3.0 使用postcss-plugin-px2rem(推荐)和 postcss-pxtorem(postcss-px2rem)自动转换px为rem 的配置方法;
如何在vue-cli3.0中使用postcss-plugin-px2rem 插件 插件的作用是 自动将vue项目中的px转换为rem . 为什么这三个中要推荐 postcss-plugin-px2r ...
- 移动端页面字体——rem的使用
浏览器的默认字体高是16px. 兼容性: 目前,IE9+,Firefox.Chrome.Safari.Opera 的主流版本都支持了rem. 对于不支持的浏览器,要多写一个绝对单位的声明,这样浏览器就 ...
- px与rem关系及转换
PX特点 1. IE无法调整那些使用px作为单位的字体大小:2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位:3. Firefox能够调整px和em,rem,但是96%以上的中 ...
- css大小单位px em rem的转换和详解
css大小单位px em rem的转换和详解 PX特点1. IE无法调整那些使用px作为单位的字体大小:2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位:3. Firefox能 ...
- 【转】CSS3的REM设置字体大小
rem 长度单位 在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: ...
随机推荐
- LoadRunner培训初级教程
一 LoadRunner简介 1.1 Loadrunner介绍 LoadRunner 是 HP Mercury Interactive 用来测试应用程序性能的工具 LoadRunner 通过模拟一个 ...
- C语言 05 数组
数组作为函数参数,可以省略元素个数. 数组作为函数参数,传递是整个数组的地址,修改函数形参数组的值,会影响到外面的 实参数组. 基本数据类型作为函数参数,传递是数值.
- job
详情见:http://blog.csdn.net/wxwzy738/article/details/25158787 spring.xml <beans xmlns="http://w ...
- 7. LAMP环境搭建
一.准备工作 1.安装编译工具gcc.gcc-c++ 注意解决依赖关系,推荐使用yum安装,若不能联网可使用安装光盘做为yum源-- 1)编辑yum配置文件: # mount /dev/cdrom / ...
- LeetCode:455. Assign Cookies
package Others; import java.util.Arrays; //Question 455. Assign Cookies /* Assume you are an awesome ...
- mysql基本语句
mysql -u root -p; 登录数据库 show databases; 展示数据库 show tables; 展示表 desc messages; 查看messages表的结构 drop da ...
- Web API
https://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api/tutorial-your-first-web-api ...
- 源码剖析——深入Windows句柄本质
参考资料: 1. http://www.codeforge.cn/read/146318/WinDef.h__html windef.h头文件 2. http://www.codeforge.cn/r ...
- Fiddler 4 抓包
Fiddler 4 Tools –> Fiddler Options HTTPS -> 勾选"CaptureHTTPS CONNECTs",同时勾选"Decr ...
- main函数的详解
public : 公共的. 权限是最大,在任何情况下都可以访问. 原因: 为了保证让jvm在任何情况下都可以访问到main方法. static: 静态.静态可以让jvm调用main函数的时候更加的方便 ...