rem单位

作者: 一沭丶 | 来源:发表于2016-08-19 16:34 被阅读66次

css:

 html {
  font-size : 20px;
}
@media only screen and (min-width: 401px){
  html {
      font-size: 25px !important;
  }
}
@media only screen and (min-width: 428px){
  html {
      font-size: 26.75px !important;
  }
}
@media only screen and (min-width: 481px){
  html {
      font-size: 30px !important; 
  }
}
@media only screen and (min-width: 569px){
  html {
      font-size: 35px !important; 
  }
}
@media only screen and (min-width: 641px){
  html {
      font-size: 40px !important; 
  }
} 

js:

!(function(doc, win) {
    var docEle = doc.documentElement,
        evt = "onorientationchange" in window ? "orientationchange" : "resize",
        fn = function() {
            var width = docEle.clientWidth;
            width && (docEle.style.fontSize = 20 * (width / 320) + "px");
        };
     
    win.addEventListener(evt, fn, false);
    doc.addEventListener("DOMContentLoaded", fn, false);
 
}(document, window));

媒体查询中的具体的font-size需要结合大家的设计师们来一起调试确定,写一套适合自己公司的。

参考资料1
参考资料2

相关文章

  • rem单位

    Rem 现如今移动端的尺寸大小多种导致也页面不能在各种屏幕上适配,许多网站之前主要采取(1)采用的流式布局:通过百...

  • rem单位

    css: js: 媒体查询中的具体的font-size需要结合大家的设计师们来一起调试确定,写一套适合自己公司的。...

  • Rem布局

    移动web开发之rem布局 rem基础 rem单位 rem (root em)是一个相对单位,类似于em,em是父...

  • css单位px、rem、vw

    css单位 px 、rem 、vw 都是相对单位 rem rem 的计算是相对于 html 页面的 font-si...

  • 移动端开发-01

    rem布局 rem单位 rem (root em)是一个相对单位,类似于em,em是父元素字体大小。不同的是rem...

  • 移动 web 开发 —— rem 布局

    1. rem 基础 rem 单位 rem(root em)是一个相对单位,类似于 em,em 是父元素字体大小。 ...

  • vue px2rem

    vue ,使用rem单位,可在不同屏幕上完美显示相同的布局。px2rem 插件方便的将px单位转为了rem。 px...

  • 自适应rem布局

    rem是个低调的css单位,手淘在移动端的布局是基于rem处理的,当然还要基于viewport的处理。用rem单位...

  • 移动web五 - Rem布局

    一、rem基础 1. rem单位 rem (root em)是一个相对单位,类似于em,em是父元素字体大小。不同...

  • web rem单位

    http://isux.tencent.com/web-app-rem.html

网友评论

      本文标题:rem单位

      本文链接:https://www.haomeiwen.com/subject/uevbsttx.html