前沿

在最近開發(fā)中，需要用到一些公共的自己寫好的筆記的時候，發(fā)現(xiàn)老是到處亂找代碼，之前也有存儲，各種筆記，各種備份，但是發(fā)現(xiàn)好不方便，于是就想到了網(wǎng)絡(luò)是個好東西，就開始記錄下來，方便自己以后使用，一方面提醒自己時刻保持這種做筆記的好處，另一方面可以提高自己的開發(fā)效率，畢竟好記性不如爛筆頭嗎。這個筆記以后會隨時更新，因為開發(fā)過程中會遇到各種問題。希望可以多多提意見。

//此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;
}
超出高度出現(xiàn)....或者是指定可以顯示幾行
.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;
//此處是根據(jù)ui圖來匹配的，一般移動端是375像素的，可以根據(jù)ui圖的基準(zhǔn)值來改變。
            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中寫入方法，運(yùn)行就可以了

例如

<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;
//此處是根據(jù)ui圖來匹配的，一般移動端是375像素的，可以根據(jù)ui圖的基準(zhǔn)值來改變。
            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，要結(jié)合上邊的rem使用

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    cursor: pointer;
    /*移除移動端點擊時藍(lán)色遮罩*/
    -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標(biāo)簽的下劃線
 */

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;
}