zoukankan      html  css  js  c++  java
  • 响应字体大小(移动端)

    大前提:
    1、initial-scale 为 1;
    2、在项目css中(注意不要被公共的base、common之类的影响了,资源加载顺序也是蛮重要的),先把html的fontSize设置为 100px(或者加上媒体查询代码), 避免加载未完成时候样式错乱;

    html{fontSize:100px}

    需要全屏的话加上CSS

    html{height:100%;position:relative;} body{margin:0 auto;height:100%;}

    方法一

    (function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                docEl.style.fontSize = 100 * (clientWidth / 320) + 'px';
            };
    
        // Abort if browser does not support addEventListener
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);

    方法二(用的不错)

    new 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.5?0.5: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 );
            };

      //设计稿是640PX 则宽度为640/100=6.4rem
     

    方法三(640/750是设计稿尺寸可以修改,使用时候除以100为REM尺寸)

    !(function(win, doc){
        function setFontSize() {
            // 获取window 宽度
            // zepto实现 $(window).width()就是这么干的
            var winWidth =  window.innerWidth;
     
            doc.documentElement.style.fontSize = (winWidth / 640) * 100 + 'px' ;
        }
     
        var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';
        
        var timer = null;
     
        win.addEventListener(evt, function () {
            clearTimeout(timer);
     
            timer = setTimeout(setFontSize, 300);
        }, false);
        
        win.addEventListener("pageshow", function(e) {
            if (e.persisted) {
                clearTimeout(timer);
     
                timer = setTimeout(setFontSize, 300);
            }
        }, false);
     
        // 初始化
        setFontSize();
     
    }(window, document))

     方法四(媒体查询)

    换算rem工具(https://offroadcode.com/prototypes/rem-calculator/

    @charset "UTF-8";
    /* 320px布局 */
    html {
      font-size: 100px; }
    
    body {
      font-size: 0.14rem; }
    
    /* iphone 6 */
    @media (min-device- 375px) and (max-device- 667px) and (-webkit-min-device-pixel-ratio: 2) {
      html {
        font-size: 117.1875px; } }
    
    /* iphone6 plus */
    @media (min-device- 414px) and (max-device- 736px) and (-webkit-min-device-pixel-ratio: 3) {
      html {
        font-size: 129.375px; } }
    
    p {
      border: 1px solid #eee;
      padding: 0.1rem; }
    
    .f12 {
      font-size: 0.12rem; }
    
    .f14 {
      font-size: 0.14rem; }
    
    .f16 {
      font-size: 0.16rem; }
    
    .f24 {
      font-size: 0.24rem; }
    
    .f30 {
      font-size: 0.30rem; }
    
    .f36 {
      font-size: 0.36rem; }

     方法五

    /**
     * [以iPhone6的设计稿为例js动态设置文档 rem 值]
     * @param  {[type]} currClientWidth [当前客户端的宽度]
     * @param  {[type]} fontValue [计算后的 fontvalue值]
     * @return {[type]}     [description]
     */
    <script>
        var currClientWidth, fontValue,originWidth;
        //originWidth用来设置设计稿原型的屏幕宽度(这里是以 Iphone 6为原型的设计稿)
        originWidth=375;
        __resize();
    
        //注册 resize事件
        window.addEventListener('resize', __resize, false);
    
        function __resize() {
            currClientWidth = document.documentElement.clientWidth;
            //这里是设置屏幕的最大和最小值时候给一个默认值
            if (currClientWidth > 640) currClientWidth = 640;
            if (currClientWidth < 320) currClientWidth = 320;
            //
            fontValue = ((62.5 * currClientWidth) /originWidth).toFixed(2);
            document.documentElement.style.fontSize = fontValue + '%';
        }
        //如设计稿是750PX 则宽度为750/20=37.5rem
    </script>
  • 相关阅读:
    String、StringBuffer、StringBuilder
    动态规划引入—矩阵乘法
    flask中间件
    有状态服务,无状态服务
    python 工厂模式
    python 单例模式
    python 工厂模式
    python timedelta() 和relativedelta()的区别
    mongo 查看(集合)表结构
    logstash 实现数据源分流
  • 原文地址:https://www.cnblogs.com/hupan508/p/5191736.html
Copyright © 2011-2022 走看看