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

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

運行到內置瀏覽器

webview 可以調試 css ✅

運行到手機或模擬器

不可以調試 css, 只支持 nvue 原生調試 ❌

docs ✅

https://uniapp.dcloud.io/matter?id=h5正常但app異常的可能性

solutions ？？？

https://ask.dcloud.net.cn/question/68375

App 平台樣式錯亂，注意使用的 css 的兼容性，可能是使用了低版本安卓不支持的 css。

參考指南：https://uniapp.dcloud.io/matter

💩 首先應自己在真機運行或微信開發工具上調整樣式，切勿在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>