Question

我正在构建离子3应用程序，我想让渐变图像更具响应性。现在，当我用iphone 5时，它看起来不错，但是当我换到其他设备时看起来不太好。

html文件

<ion-content>
<div class="bg">
    <ion-icon name="list"></ion-icon>
    <ion-grid>
        <ion-row>
            <ion-col text-center>
                <h1>2<sup>nd</sup></h1>
                <p>Current Position</p>
            </ion-col>

            <ion-col text-center>
                <img src="assets/fcb.png" alt="">
            </ion-col>

            <ion-col text-center>
                <img src="assets/lag.png" alt="" width="50px">
                <p>lagiga</p>
            </ion-col>
        </ion-row>

        <ion-row>
            <ion-col text-center>
                <h1>FC Barcelona</h1>
            </ion-col>
        </ion-row>


    </ion-grid>
</div>

css文件

page-home {
.bg {
    height: 100%;
    width: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.98) 1.48%, rgba(3, 62, 119, 0.68) 12.52%, rgb(210, 17, 83) 89.52%), url('../assets/bg.jpg');
    background-repeat: no-repeat;
    background-position: center;
}
ion-icon {
    color: #fff;
    font-size: 3.2em;
    margin-left: 15px;
}
ion-grid ion-row ion-col {
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    h1 {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        font-size: 2.6em;
        font-weight: lighter;
    }
}
.player {
    height: 70%;
}
.name {
    position: absolute;
    h1 {
        color: rgb(210, 17, 83);
    }
}

}

iphone 5

iphone 6 - 看起来不像我想要的红色区域

的ipad

Answer 1

background-size: cover;

尝试添加此data <- getSymbols("JPM", src = "google", auto.assign = F) library(shiny) library(quantmod) ui <- fluidPage( plotOutput("chart", click = "SD1") ) server <- function(input, output){ global <- reactiveValues(v = NULL) observe({ v <- input$SD1$x / 3 if(!is.null(v) & length(v)) global$v <- v }) output$chart <- renderPlot( chartSeries( data, type = "candlesticks", TA = paste0("addLines(v = ", global$v, ", on = 1)") ) ) } shinyApp(ui, server)

渐变背景包括图像响应

1 个答案: