这段js 需要置于页面上端 也就是 需要先加载js然后加载页面 (这段js是原生js而且比较短小 基本对页面加载速度无影响)

FontResize : function(maxWidth){
(function() {
function o() {
document.documentElement.style.fontSize = (document.documentElement.clientWidth > maxWidth ? maxWidth: document.documentElement.clientWidth) / (maxWidth/200)+ "px";
}

var e = null;
window.addEventListener("resize", function() {
clearTimeout(e), e = setTimeout(o, 100)
}, !1), o()
})(window);
}

maxWidth 是传入进来的页面设计尺寸 ,一般的设计稿尺寸为750px  那么此时就传入750

然后html的字体大小是100px  这时候可以根据页面的px设置rem值 ,比如页面p 的字体大小为 18px 那么我们设立的值是 0.18rem

.

fontresize 移动端的手机字体 大小设置的更多相关文章

  1. eclipse护眼颜色和字体大小设置

    ♣eclipse护眼颜色和关键字颜色设置 ♣eclipse字体大小设置(包括jsp , .xml ,.java) 1.Eclipse字体大小调整: 窗口(Window)-首选项(Preferences ...

  2. eclipse中的字体大小设置和背景色设置

    1.字体大小设置 在basic下选择最后一个TextFont 护眼背景色设置 添加到自定义颜色后点确定 最后一步点apply

  3. hotcss.js Flexible 移动端适配在dpr=2和dpr=3出现的字体大小设置不正确问题.

    这段时间一直在用hotcss做移动端适配,做了几个页面没有发现什么问题,后来老大要加快进度,我把项目分出一块给另一个同事做,她发现了一个问题就是字体在dpr=2,dpr=3,的设备上字体大小显示老是不 ...

  4. 移动端rem布局,用户调整手机字体大小或浏览器字体大小后导致页面布局出错问题

    一.用户修改手机字体设置大小,影响App里打开的web页面. 手机字体设置大小,影响App的页面.Android的可以通过webview配置webview.getSettings().setTextZ ...

  5. html5移动端页面分辨率设置及相应字体大小设置的靠谱使用方式

    对于html5移动端网页编写CSS网上有很多介绍的文章,但在实际使用过程中还是会纠结. 网上的资料太多,且大多都是技术介绍型,特别是针对android上,网上写的各种麻烦,各种复杂,各种不接地气儿.. ...

  6. rem布局,在用户调整手机字体大小/用户调整浏览器字体大小后,布局错乱问题

    一.用户调整浏览器字体大小,影响的是从浏览器打开的web页. 浏览器设置字体大小,影响浏览器打开的页面.通过js可控制用户修改字体大小,使页面不受影响. (function(doc, win) { / ...

  7. Eclipse字体大小设置

    打开Eclipse,在主界面下Window->Preferences->General->Appearance->Colors and Fonts, 然后在右边展开框Basic ...

  8. CSS字体大小设置时的参考(转)

    from:http://blog.sina.com.cn/s/blog_51cd580b0100gg6y.html font-size 设置的绝对关键字: 以下几个绝对字体大小的设置是有效的.当然他们 ...

  9. css字体大小设置em与rem的区别

    em 单位em是相对于父元素的,如果父元素没有设置字体大小,那就会追溯到body. 比如  如果我在box_text的父元素box加了一个字体大小   那么body的8px就会被box_text的父元 ...

随机推荐

  1. USB状态错误原因

    USBD_STATUS调试过USB的同学肯定见过BUS Hound里面给的各种错误提示,但是大家是否知道是什么意思呢? USBD_STATUS 出错原因,详解如下:   The USBD_STATUS ...

  2. ALTIUM 10 过孔设置开窗、不开窗

    大家或许会发现我们公司做的PCB板子,所有的过孔都开了窗,也就是说过孔没有绿油,这样会导致焊接中容易连焊.兴许大家为此吃进苦头,我是被整了好几次,查了好久却发现是个低级错误,一个过孔连焊到隔壁焊盘了. ...

  3. linux教程之四

    相信不少想学习linux的新手们正愁不知道看什么linux学习教程好,下面小编给大家收集和整理了几点比较重要的教程,供大家学习,如需想学习更多的话,可到wdlinux学堂寻找更多教程.   linux ...

  4. 【转】android使用File Explorer无法访问系统内部文件--不错

    原文网址:http://blog.csdn.net/yangqicong11/article/details/8747042 设备:Samsung GT-P3110 系统:Android 4.1.1 ...

  5. P2P网贷投资须谨防圈钱人

    摘要:P2P领域依然呈现投资热潮,甚至部分国有大行也有意涉足.这个行业到底怎么了?P2P平台上高收益的理财产品,到底能买不?     新年才刚刚过了10天,就有4家网贷平台被爆出支付危机,P2P一时被 ...

  6. RSA实例破解

    Description: Decode the message. You intercept the following message, which you know has been encode ...

  7. RHEL修改主机名和IP

    1,     修改主机名 vi /etc/sysconfig/network NETWORKING=yes HOSTNAME=NEWHOSTNAME       #修改该值作为主机名,如:NEWPC ...

  8. css浮动+应用(瀑布流效果的实现)

    首先是index.html文件: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  9. C# 利用反射查看类的信息

    using System; using System.Collections; using System.Collections.Generic; using System.Reflection; u ...

  10. [原创]安卓使用Termux做渗透测试(演示sqlmap安装,并附上一个神器)

    由于手机kali太大,并且MIUI8+Android6.0的我.用手机kali不是太方便(懒得捣鼓),所以另找道路,用手机作渗透测试. 1.下载一个Termux,并授予ROOT权限. 2.打开之后输入 ...