zoukankan      html  css  js  c++  java
  • rem计算适配

    git地址:https://github.com/wjf444128852/about-web-rem

     建议在CSS引入之前引入下面这段JS代码,比例1rem:100px。

    用了这个JS就不用在CSS内写N多个@media screenXXX了。

    说明:

    • 在html内最外层元素给max-640px,min-320px
    • 元素宽高都以rem为单位就会自动缩放
    • 字体大小一般0.2rem-0.34rem,如>h3:font-size:0.3rem,h4:font-size:.28rem,p:font-size:.2rem一般这几个够用了.
    • 引入img标签时候该img必须float或者给一个属性(vertical-align: middle;display:block)否则其与父元素有20多px的margin-bottom
    • 如img想自适应需要给个宽度,宽度可以百分比,可以rem为单位给固定宽度,比如img实际宽度100px,用此JS后想自动缩放,可以css里给该img{1rem},其他元素雷同。
    • 如果有用到input时候,该input得浮动或者以rem为单位给固定宽度和高度,不然占据行高很大,出现元素占据位置大时候,float一下即可
    • 参考来源:戳此处
      (function (doc, win) {
                      var docEl = doc.documentElement,
                          resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                          //orientationchange 事件是在用户水平或者垂直翻转设备(即方向发生变化)时触发的事件。
                          //resize事件是屏幕缩放时候触发的事件
                          recalc = function () {
                              var clientWidth = docEl.clientWidth;
                              if (!clientWidth) return;
                              if(clientWidth>=640){
                                  docEl.style.fontSize = '100px';
                              }else{
                                  docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                              }
                          };
                      if (!doc.addEventListener) return;
                      win.addEventListener(resizeEvt, recalc, false);
                      doc.addEventListener('DOMContentLoaded', recalc, false);
                      /*DOMContentLoaded是firefox下特有的Event, 当所有DOM解析完以后会触发这个事件。
                      DOMContentLoaded事件本身不会等待CSS文件、图片、iframe加载完成。
                      它的触发时机是:加载完页面,解析完所有标签(不包括执行CSS和JS),
                      并如规范中所说的设置interactive和执行每个静态的script标签中的JS,然后触发。
                      而JS的执行,需要等待位于它前面的CSS加载(如果是外联的话)、执行完成,
                      因为JS可能会依赖位于它前面的CSS计算出来的样式。*/
                  })(document, window);

      如有不足之处多多指出。。

  • 相关阅读:
    <Android 应用 之路> 聚合数据SDK
    AngularJS所有版本下载地址
    <Android 应用 之路> 天气预报(三)
    <Android 应用 之路> 天气预报(二)
    Java集合框架—Set
    HBase数据模型(2)
    HBase数据模型(1)
    ESP8266串口WiFi扩展板详解
    Arduino ESP8266编程深入要点
    <Android Framework 之路>多线程
  • 原文地址:https://www.cnblogs.com/-walker/p/5933456.html
Copyright © 2011-2022 走看看