时间戳

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

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

问题描述

我的闪亮应用程序有不同的绝对面板，但它们在不同屏幕上的外观不同。特别是，我注意到面板的大小和其中的文本（通常出现在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%（所以它太大了）。关于如何处理这个问题的任何建议？

谢谢！

标签： htmlcssrshinyscreen

解决方案

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

h1并且h3有固定的尺寸。相反，您可以使用标签并以单位p指定其 CSS 属性。font-sizevh

br是一个换行符，它的高度是line-height. 除了使用 a 之外，您还可以使用带有以单位给出的 CSS 属性br()的空：。divheightvhdiv(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")
                         )
                  )
                )
  )

推荐阅读