zoukankan      html  css  js  c++  java
  • rem 之js代码获取font-size值(适合移动手机端)

      这两天学的是自适应,代码有点乱。而且这几天忙着写实习报告,也没有时间去整理。

      但是,这下面代码吧,是可以获取html的font-size值的,然后用来设置相对单位rem的从而达到自适应效果的;看到红色的width了吧,把它改成你屏幕宽度就好,比如我的是1920px;那么这样算出来html{font-size:600px}; 这样的话你要设置其他元素的rem,比如span{font-size:12px;},要自适应就用12/600,就是0.02rem,span{font-size:0.02rem;}这样你的span字体就随屏幕大小也变了,或者你要设置图片啊傻的,也是用它的宽或者高除于600。

      至于你要pc端和手机端分开效果什么的,用@media分别写CSS样式就哦了。

     <script>
            !(function(doc, win) {
                var docEle = doc.documentElement,//获取html元素
                    event = "onorientationchange" in window ? "orientationchange" : "resize",//判断是屏幕旋转还是resize;
                    fn = function() {
                        var width = docEle.clientWidth;
                        width && (docEle.style.fontSize = 100  * (width / 320) + "px");//设置html的fontSize,随着event的改变而改变。
                    };
                
                win.addEventListener(event, fn, false);
                doc.addEventListener("DOMContentLoaded", fn, false);
            
            }(document, window));
        </script>

  • 相关阅读:
    使用selenium操作ant design前端的页面,感觉页面没加载完
    centos7上PhantomJS 过期之后改用Chrome时填的坑
    《追风行动》有点儿意思
    《听读书怪才解读24部名人传记》笔记
    mysql 8.0 密码加密方式的坑
    huginn website agent对提取结果排序
    Server酱微信推送中的问题
    Huginn定时时间不准确或延后问题
    一本通1219 马走日
    矩阵快速幂
  • 原文地址:https://www.cnblogs.com/liaoliao985786516/p/5605274.html
Copyright © 2011-2022 走看看