zoukankan      html  css  js  c++  java
  • 移动端rem用法总结

    先介绍一下这个近年来突起的黑马

    CSS3中新增的属性,从IE9开始兼容,手机端都兼容。
    参考的是<html>这个标签的font-size。rem中的r就是root根的意思。
    所以rem要比em好用的多,因为em参考的是父亲的字号,和rem永远参考的是根元素(html标签)的字号。

    rem被发明,实际上是为了做字号的变化方便一点。

    中国的前端工程师,发现,rem不仅仅可以用来设置字号。还可以用来设置任何需要长度的地方。比如:
    width、height、line-hight、background-size、border-width。
     
    用这个黑马是可以做不同分辨率的响应式布局的  当然移动端就不要考虑pc了 兼容到ipad就可以了 
     
    思路就是所有的单位都用rem来写  不管是div的宽高 还是a标签的字体大小
     
    假设我们的移动端psd是按照640的标准来的 那么就设置 html{font-size:20px} 
    再去把div的宽度和高度由像素全部转变为rem  还有字体大小 也转换一下 
     
    这只是兼容了一个手机型号 或者说640的viewport的布局 那么更小的或者更大的怎么办呢  不要着急  有两种办法来解决  看你习惯了
     
    第一种  media出场
    复制代码
    html {
        font-size : 20px;
    }
    @media only screen and (min- 401px){
        html {
            font-size: 25px !important;
        }
    }
    @media only screen and (min- 428px){
        html {
            font-size: 26.75px !important;
        }
    }
    @media only screen and (min- 481px){
        html {
            font-size: 30px !important; 
        }
    }
    @media only screen and (min- 569px){
        html {
            font-size: 35px !important; 
        }
    }
    @media only screen and (min- 641px){
        html {
            font-size: 40px !important; 
        }
    }
    复制代码

    第二种办法 来了

    复制代码
    <script>
         (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 = 20 * (clientWidth / 320) + 'px';
                };
    
              if (!doc.addEventListener) return;
              win.addEventListener(resizeEvt, recalc, false);
              doc.addEventListener('DOMContentLoaded', recalc, false);
            })(document, window);
    </script>
    复制代码

    好了 大家赶紧去试试吧  如果有什么问题欢迎留言  新手总结 欢迎拍板 

  • 相关阅读:
    VS2008编写MFC程序--使用opencv2.4()
    November 02nd, 2017 Week 44th Thursday
    November 01st, 2017 Week 44th Wednesday
    October 31st, 2017 Week 44th Tuesday
    October 30th, 2017 Week 44th Monday
    October 29th, 2017 Week 44th Sunday
    October 28th, 2017 Week 43rd Saturday
    October 27th, 2017 Week 43rd Friday
    October 26th, 2017 Week 43rd Thursday
    October 25th, 2017 Week 43rd Wednesday
  • 原文地址:https://www.cnblogs.com/bilibilicai/p/6826278.html
Copyright © 2011-2022 走看看