uni-app CSS 樣式布局錯亂 All In One

uni-app 樣式布局錯亂 All In One

uni-app CSS 樣式布局錯亂 All In One

uni-app 寫的 H5 頁面在内置的 webview 模式下調試正常, 但是在 ios 模拟器上調試樣式錯亂, 不一緻

運作到内置浏覽器

webview 可以調試 css ✅

運作到手機或模拟器

不可以調試 css, 隻支援 nvue 原生調試 ❌

docs ✅

​

???? 首先應自己在真機運作或微信開發工具上調整樣式，切勿在H5版開發後直接打包！

原因找到了, uni-app 裡面不能用 CSS 僞類 ???

原因找到了，不能使用字型圖示元件 ??? icon-fonts / emoji ???

vue 裡隻有行内樣式有效，标簽裡的樣式和引入的樣式都失效 ???

solution

scss scoped ❌ bug

父元件的 css 樣式沒有加 scoped， 導緻子元件繼承了與父元件同名的 class 樣式 bug;

<style lang="scss">
.content {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-bottom: 50px;
    background-color: #f0f0f2;
    /* height: 100vh;
    height: 768px; */
}
</style>
      

<style scoped lang="scss">
.data-block-card-container {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    justify-content: center;
    margin: 10px;
    padding: 20px;
    background: #fff;
    border-radius: 2px;
    .title {
        /* font-size: 14rpx; */
        font-size: 14px;
        /* font-size: 1rem; */
        margin-bottom: 8px;
    }
    .time {
        font-size: 12px;
        line-height: 20px;
        margin-bottom: 20px;
        .item {
            display: inline-block;
        }
        .separate {
            margin: 0 5px;
        }
    }
    .content {
        box-sizing: border-box;
        display: flex;
        flex-flow: row nowrap;
        align-items: flex-start;
        justify-content: center;
        // height: 66px;
        background: #fff;
        .left {
            box-sizing: border-box;
            display: flex;
            flex-flow: column nowrap;
            align-items: flex-start;
            justify-content: space-between;
            width: 100px;
            .date {
                margin-bottom: 12px;
            }
            .all {
                font-size: 24px;
                line-height: 32px;
            }
        }
        .right {
            box-sizing: border-box;
            display: flex;
            flex-flow: column nowrap;
            align-items: flex-start;
            justify-content: center;
            width: 70px;
            height: 100%;
            // height: 66px;
            border-left: 1px dashed #999;
            padding-left: 10px;
            .item {
                box-sizing: border-box;
                display: flex;
                flex-flow: row nowrap;
                align-items: flex-start;
                justify-content: center;
                margin-top: 5px;
                margin-bottom: 12px;
                .key {
                    display: inline-block;
                    margin-right: 10px;
                }
                .text {
                    display: inline-block;
                }
            }
        }
    }
    .ratio {
        box-sizing: border-box;
        display: flex;
        flex-flow: row nowrap;
        align-items: flex-start;
        justify-content: center;
        margin-top: 12px;
        .item {
            margin-right: 10px;
            .value {
                position: relative;
                /* text-indent: 10px; */
                padding-left: 20px;
                // ::before {
                //     position: absolute;
                //     top: -3px;
                //     left: 0px;
                //     display: inline-block;
                //     /* width: 10px;
                //     height: 10px; */
                //     // content: "✅";
                //     content: "⬆";
                //     /* content: "⬇"; */
                // }
            }
        }
    }
}
</style>


      

X5 核心

騰訊 TBS x5 核心僅支援 Android 平台；iOS 隻能使用自帶的 WKWebview

​h