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

Question

我闪亮的应用程序有不同的 绝对面板 ，但它们在不同屏幕上的外观不同。特别是，我注意到面板的大小和其中的文本（通常出现在 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 单位指定高度。这些单位分别是视口宽度和视口高度的百分比。例如，width = "50vw" 表示视口宽度的 50%。请注意，当 window 调整大小时，这也会缩放。

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")
                         )
                  )
                )
  )

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

Resize absolute panel and text inside it on different screens (Desktop, Laptop, Mobile)

html

css

r

shiny

screen