html - 在不同屏幕(台式机、笔记本电脑、移动设备)上调整绝对面板和其中的文本的大小

Question

我 Shiny 的应用程序有不同的绝对面板，但它们在不同屏幕上的外观不同。特别是，我注意到面板的大小和其中的文本(通常出现在 h() 标签内)总是相同的，而一些小部件(如 actionButtons)会自动调整大小。这是一个最小的可重现示例，其中包含一个应该出现在屏幕中间的 absolutePanel:

library(shiny)

ui <- fluidPage(

  absolutePanel(id = "initial_panel",
                fixed = TRUE,
                top = 0,
                left = 0,
                bottom = 0,
                right = 0,
                width = 900,
                height = 450,
                style = "background-color: white;
                         opacity: 0.85;
                         padding: 20px 20px 20px 20px;
                         margin: auto;
                         border-radius: 5pt;
                         box-shadow: 0pt 0pt 6pt 0px rgba(61,59,61,0.48);
                         padding-bottom: 2mm;
                         padding-top: 1mm;",

                fluidRow(
                  column(width = 12,
                         align = "center",
                         h1(strong("Welcome!"))
                  )
                ),
                fluidRow(
                  column(width = 12,
                         align = "center",
                         h3("Some more text")
                  )
                ),

                br(),

                fluidRow(
                  column(width = 12,
                         align = "center",
                         actionButton(inputId = "explore",
                                      label = icon(name = "times",
                                                   class = "fa-2x",
                                                   lib = "font-awesome")
                         )
                  )
                )
  )

)

server <- function(input, output, session) {

}

shinyApp(ui, server)

如果我从台式机切换到笔记本电脑，这个面板几乎占据了屏幕尺寸的 60%(所以它太大了)。关于如何处理这个问题有什么建议吗？

谢谢!

Answer 1

您可以使用 vw CSS 单位指定宽度，使用 vh CSS 单位指定高度。这些单位分别是视口(viewport)宽度和视口(viewport)高度的百分比。例如，width = "50vw" 表示视口(viewport)宽度的 50%。请注意，这也会在调整窗口大小时缩放。

h1 和 h3 具有固定大小。相反，您可以使用 p 标记并以 vh 单位指定其 CSS 属性 font-size。

br是一个换行符，它的高度是line-height的高度。除了使用 br()，您还可以使用空的 div 和 vh 中给出的 CSS 属性 height单位:div(style = "height: 2vh;")。

  absolutePanel(id = "initial_panel",
                fixed = TRUE,
                top = 0,
                left = 0,
                bottom = 0,
                right = 0,
                width = "50vw",
                height = "50vh",
                style = "background-color: white;
                         opacity: 0.85;
                         padding: 20px 20px 20px 20px;
                         margin: auto;
                         border-radius: 5pt;
                         box-shadow: 0pt 0pt 6pt 0px rgba(61,59,61,0.48);
                         padding-bottom: 2mm;
                         padding-top: 1mm;",

                fluidRow(
                  column(width = 12,
                         align = "center",
                         tags$p(strong("Welcome!"), style = "font-size: 3vh;")
                  )
                ),
                fluidRow(
                  column(width = 12,
                         align = "center",
                         tags$p("Some more text", style = "font-size: 1vh;")
                  )
                ),

                div(style = "height: 2vh;"),

                fluidRow(
                  column(width = 12,
                         align = "center",
                         actionButton(inputId = "explore",
                                      label = icon(name = "times",
                                                   class = "fa-2x",
                                                   lib = "font-awesome")
                         )
                  )
                )
  )