css之样式重置，移动pc，rem动态js配置，移动端meta。

分手后的思念是犯贱 2022-02-27 14:06 95阅读 0赞

### css样式重置，rem动态设置，移动端表头 ###

*   *   *  一、css重置
         *  二、移动端html表头
         *  三、移动端适配rem动态设置。
         *   *   *  1.常规配置
                 *  2.高清压缩版
                 *  3.高清版源码
                 *  4.手淘版
         *  四、pc端适配rem动态设置。
         *  五、媒体查询和常用属性。
         *  六、pc移动同时适配rem

### 一、css重置 ###

> html标签有很多默认属性，为了方便布局，一般都会选择重置样式。scss的语法。

body, div, span, header, footer, nav, section, aside, article, ul, dl, dt, dd, li, a, p, h1, h2, h3, h4,h5, h6,em, i, b, textarea, button, input, select, figure, figcaption { 
        padding: 0;
        margin: 0;
        list-style-type: none;
        font-style: normal;
        text-decoration: none;
    	border: none;
    	background: none;
    	color: #333;
    	font-size: 14px;
        font-weight: normal;
    	font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
    	box-sizing: border-box;
        -webkit-tap-highlight-color:transparent;
        -webkit-font-smoothing: antialiased; &:hover{ 
            outline: none;
        }
    }

### 二、移动端html表头 ###

> html

<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
        <meta name="screen-orientation" content="portrait"/>
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="format-detection" content="telephone=no">
        <meta name="full-screen" content="yes">
        <meta name="x5-fullscreen" content="true">
        <title>移动端页面配置</title>
      </head>

### 三、移动端适配rem动态设置。 ###

> rem布局还是比较流行的，解决了不同设配屏幕大小问题。  
> 它是根据html根字节大小来适配的。

##### 1.常规配置 #####

(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);

##### 2.高清压缩版 #####

//阿里的一套动态生成根rem。
      ! function (e) { 
       function t(a) { 
         if (i[a]) return i[a].exports;
         var n = i[a] = { 
           exports: { },
           id: a,
           loaded: !1
         };
         return e[a].call(n.exports, n, n.exports, t), n.loaded = !0, n.exports
       }
       var i = { };
       return t.m = e, t.c = i, t.p = "", t(0)
     }([function (e, t) { 
       "use strict";
       Object.defineProperty(t, "__esModule", { 
         value: !0
       });
       var i = window;
       t["default"] = i.flex = function (normal, e, t) { 
         var a = e || 100,
           n = t || 1,
           r = i.document,
           o = navigator.userAgent,
           d = o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),
           l = o.match(/U3\/((\d+|\.){5,})/i),
           c = l && parseInt(l[1].split(".").join(""), 10) >= 80,
           p = navigator.appVersion.match(/(iphone|ipad|ipod)/gi),
           s = i.devicePixelRatio || 1;
         p || d && d[1] > 534 || c || (s = 1);
         var u = normal ? 1 : 1 / s,
           m = r.querySelector('meta[name="viewport"]');
         m || (m = r.createElement("meta"), m.setAttribute("name", "viewport"), r.head.appendChild(m)), m
           .setAttribute("content", "width=device-width,user-scalable=no,initial-scale=" + u + ",maximum-scale=" +
             u + ",minimum-scale=" + u), r.documentElement.style.fontSize = normal ? "50px" : a / 2 * s * n + "px"
       }, e.exports = t["default"]
     }]);
     flex(false, 100, 1);

##### 3.高清版源码 #####

'use strict';
    
    /** * 这个是高清方案。 * @param {Boolean} [normal = false] - 默认开启页面压缩以使页面高清; * @param {Number} [baseFontSize = 100] - 基础fontSize, 默认100px; * @param {Number} [fontscale = 1] - 有的业务希望能放大一定比例的字体; */
    const win = window;
    export default win.flex = (normal, baseFontSize, fontscale) => { 
      const _baseFontSize = baseFontSize || 100;
      const _fontscale = fontscale || 1;
    
      const doc = win.document;
      const ua = navigator.userAgent;
      const matches = ua.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i);
      const UCversion = ua.match(/U3\/((\d+|\.){5,})/i);
      const isUCHd = UCversion && parseInt(UCversion[1].split('.').join(''), 10) >= 80;
      const isIos = navigator.appVersion.match(/(iphone|ipad|ipod)/gi);
      let dpr = win.devicePixelRatio || 1;
      if (!isIos && !(matches && matches[1] > 534) && !isUCHd) { 
        // 如果非iOS, 非Android4.3以上, 非UC内核, 就不执行高清, dpr设为1;
        dpr = 1;
      }
      const scale = normal ? 1 : 1 / dpr;
    
      let metaEl = doc.querySelector('meta[name="viewport"]');
      if (!metaEl) { 
        metaEl = doc.createElement('meta');
        metaEl.setAttribute('name', 'viewport');
        doc.head.appendChild(metaEl);
      }
      metaEl.setAttribute('content', `width=device-width,user-scalable=no,initial-scale=${ scale},maximum-scale=${ scale},minimum-scale=${ scale}`);
      doc.documentElement.style.fontSize = normal ? '50px' : `${ _baseFontSize / 2 * dpr * _fontscale}px`;
    };

##### 4.手淘版 #####

### 四、pc端适配rem动态设置。 ###

> 第一种，推荐

(function(doc, win) { 
      var docEl = doc.documentElement,
      resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
      recalc = function() { 
      let clientWidth = docEl.clientWidth; 
      let designSize = 100/1920; //默认比例
      if (!clientWidth) return;
      docEl.style.fontSize = clientWidth *  designSize + 'px';
      };
      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);
      })(document, window);
    });

> 第二种

$(window).resize(function ()// 绑定到窗口的这个事件中
    { 
    var whdef = 100/1920;// 表示1920的设计图,使用100PX的默认值
    var wH = window.innerHeight;// 当前窗口的高度
    var wW = window.innerWidth;// 当前窗口的宽度
    var rem = wW * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
    $('html').css('font-size', rem + "px");
    });

### 五、媒体查询和常用属性。 ###

width 可视区域宽度，取值格式为指定宽度或者范围，如 @media (width: 900px){  }
    height 可视区域高度，取值格式为指定宽度或者范围，如 @media (max-height: 900px){  }
    device-width 设备宽度，取值格式为指定宽度或者范围，如 @media (max-device-width: 5000px) {  }
    device-height 设备高度 取值格式为指定宽度或者范围，如 @media (max-device-height: 5000px) {  }
    orientation 设备是竖屏还是横屏模式，可选值有landscape（横屏）、portrait（竖屏），如 @media (orientation: landscape) {  }
    aspect-ratio 可视区域宽高比，取值格式为水平像素/垂直像素，如@media (device-aspect-ratio:16/9) {  }
    device-aspect-ratio 设备宽高比，取值格式为水平像素/垂直像素，如@media (device-aspect-ratio:16/9) {  }

> end

### 六、pc移动同时适配rem ###