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

问题描述：

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

My shiny application has different absolute panels, but their appearance is different on different screens. In particular, I noticed that the size of the panel and the text inside it, usually present inside h() tags) are always the same, while some widget (as actionButtons) are automatically resized. Here is a minimal reproducible example with an absolutePanel that is supposed to appear in the middle of the screen:

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％(因此太大).关于如何处理这个问题有什么建议吗?

If from my desktop I switch to the laptop, this panel takes almost the 60% of the screen size (so it's too big). Any suggestion on how to deal with this?

谢谢！

答

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

You can specify the width with the vw CSS unit and the height with the vh CSS unit. These units are percentages of the viewport width and the viewport height respectively. For example, width = "50vw" for 50% of the viewport width. Note that this also scales when the window is resized.

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

h1 and h3 have a fixed size. Instead, you can use a p tag and specify its CSS property font-size in vh units.

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

br is a line break, its height is the one of line-height. Instead of using a br(), you can use an empty div with the CSS property height given in vh units: 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")
                         )
                  )
                )
  )

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

相关推荐