前沿

在最近开发中，需要用到一些公共的自己写好的笔记的时候，发现老是到处乱找代码，之前也有存储，各种笔记，各种备份，但是发现好不方便，于是就想到了网络是个好东西，就开始记录下来，方便自己以后使用，一方面提醒自己时刻保持这种做笔记的好处，另一方面可以提高自己的开发效率，毕竟好记性不如烂笔头吗。这个笔记以后会随时更新，因为开发过程中会遇到各种问题。希望可以多多提意见。

//此base.css为pc端公共css代码。
* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

li {
    list-style: none;
}

input {
    outline: none;
}

.W100 {
    width: 100%;
}

.H100 {
    height: 100%;
}

.Bai100 {
    width: 100%;
    height: 100%;
}

.FL {
    float: left;
}

.FR {
    float: right;
}

.PR {
    position: relative;
}

.PA {
    position: absolute;
}

.PF {
    position: fixed;
}

.hide {
    display: none;
}

.TAC {
    text-align: center;
}

.TAL {
    text-align: left;
}

.TAR {
    text-align: right;
}

.F12 {
    font-size: 12px;
}

.F14 {
    font-size: 14px;
}

.F16 {
    font-size: 16px;
}

.F18 {
    font-size: 18px;
}

.F20 {
    font-size: 20px;
}

.F22 {
    font-size: 22px;
}

.F24 {
    font-size: 24px;
}

.CorRed {
    color: red;
}

.CorW {
    color: white;
}

.CorB {
    color: black;
}

.BGCW {
    background: #ffffff;
}

.BGCB {
    background: #000000;
}

// is change every project 
.HomeColor {
    color: #432654;
}

// Out of display...
.Ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
超出高度出现....或者是指定可以显示几行
.moreLine{
        display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
}

.MT20 {
    margin-top: 20px;
}
.flexCenter{
    display: flex;
    justify-content: center;
    align-items: center;
}

此处为移动端rem计算方式，适配rem.

(function(doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
            var clientWidth = docEl.clientWidth;
            if(!clientWidth) return;
//此处是根据ui图来匹配的，一般移动端是375像素的，可以根据ui图的基准值来改变。
            docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';
            doc.body.style.display = 'block';
        };

    if(!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

在vue-cli 脚手架中如何让使用方法

只需要在vue项目中的目录下的index.html中写入方法，运行就可以了

例如

<script type='text/javascript'>
(function(doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
            var clientWidth = docEl.clientWidth;
            if(!clientWidth) return;
//此处是根据ui图来匹配的，一般移动端是375像素的，可以根据ui图的基准值来改变。
            docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';
            doc.body.style.display = 'block';
        };

    if(!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>

此处配合在index.scss中加入media媒体查询解决闪烁问题

@media (min-width: 320px){html{font-size: 42.6667px;} }
@media (min-width: 360px){html{font-size: 48px;} }
@media (min-width: 375px){html{font-size: 50px;} }
@media (min-width: 384px){html{font-size: 51.2px;} }
@media (min-width: 414px){html{font-size: 55.2px;} }
@media (min-width: 448px){html{font-size: 59.7333px;} }
@media (min-width: 480px){html{font-size: 48px;} }
@media (min-width: 512px){html{font-size: 68.2667px;} }
@media (min-width: 544px){html{font-size: 72.5333px;} }
@media (min-width: 576px){html{font-size: 76.8px;} }
@media (min-width: 608px){html{font-size: 81.0667px;} }
@media (min-width: 640px){html{font-size: 85.3333px;} }
@media (min-width: 750px){html{font-size: 100px;} }

这样的话直接在你的项目中使用就可以，如果ui给的宽是20px,那么你直接写0.2rem就好了。

此处为移动端base.css，要结合上边的rem使用

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    cursor: pointer;
    /*移除移动端点击时蓝色遮罩*/
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

html,
body {
    width: 100%;
    /*IOS下会影响滑动,建议不写*/
    height: 100%;
}


/**
 * IOS下移除原生样式，正常显示按钮
 */

input {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-appearance: none;
}


/**
 * 移除a标签的下划线
 */

a {
    text-decoration: none;
    cursor: pointer;
}

.BorderRadius10 {
    border-radius: 10px;
}

.TitleBgColor {
    background-color: #911A56;
}

.TitleFontColor {
    color: blue;
}

.BgColor {
    background-color: #FFFFFF;
}

.Font10 {
    font-size: 0.1rem;
}

.Font11 {
    font-size: 0.11rem;
}

.Font12 {
    font-size: 0.12rem;
}

.Font13 {
    font-size: 0.13rem;
}

.Font14 {
    font-size: 0.14rem;
}

.Font15 {
    font-size: 0.15rem;
}

.Font16 {
    font-size: 0.16rem;
}

.Font18 {
    font-size: 0.18rem;
}

.Font32 {
    font-size: 0.32rem;
}

.Width100 {
    width: 100%;
}

.Height100 {
    height: 100%;
}

.ColorWhite {
    color: #FFFFFF;
}

.ColorGreen {
    color: green;
}

.ColorRed {
    color: red;
}
.Bai100 {
    width: 100%;
    height: 100%;
}

.FL {
    float: left;
}

.FR {
    float: right;
}

.PR {
    position: relative;
}

.PA {
    position: absolute;
}

.PF {
    position: fixed;
}

.hide {
    display: none;
}
.flexCenter{
    display: flex;
    justify-content: center;
    align-items: center;
}