需要 CSS 移动适配帮助（Plotly Dash 应用程序）

Posted 2023-03-21

【中文标题】需要 CSS 移动适配帮助（Plotly Dash 应用程序）

【英文标题】：CSS Mobile Adaptation help needed (Plotly Dash app)

【发布时间】：2021-09-26 12:38:01

【问题描述】：

我几乎完成了我的网络仪表板，可以看到 here。这是source code。我想改进的最后几位是导航栏和页脚的移动适配。我正在努力正确定位元素，在某些设备上，它看起来比在其他设备上更糟糕。在 CSS 方面我还不是最好的，所以我需要一点帮助。

我遇到的几个问题是标题定位不正确：

.

我希望将其放置在顶部和底部之间的距离相等的位置。我希望它与左侧的距离与汉堡按钮与右侧的距离相同。

页脚也有同样的问题。它看起来组织得不太好：

甚至更糟：

我希望这些元素在顶部和底部之间的距离相等，并且永远不会重叠，最好都在一条线上。我敢肯定这里有很多解决方案，但任何简单且看起来更有条理的解决方案都会受到欢迎。

我需要提一提的是，html 元素是在 Plotly Dash 环境中的 Python 代码中定义的，但我很确定它没有区别。

我在这里附上了一些 Plotly HTML 和 CSS 代码，但完整代码是 here:

导航栏的HTML代码：

app.layout = html.Div([
html.Nav([
    html.Div("Covid-19 global data Dashboard", className="dashboard-title"),
    html.A(
        id="toggle-button",
        children=[
            html.Span(className="bar"),
            html.Span(className="bar"),
            html.Span(className="bar"),
            ],
        href="#",
        className="toggle-button"),
    html.Div(
        id="navbar-links",
        children=html.Ul(
            children=[
                html.Li(html.A("Home", href=homeURL)),
                html.Li(html.A('Source Code', href=sourceCodeURL)),
                html.Li(html.A("CSV Data", href=sourceDataURL))]),
        className="navbar-links active"
    )]

页脚的 HTML 代码：

html.Footer([
    html.Div("created by Sebastian Meckovski", id='footer-text'),

    html.Div([
        html.P(['Find Me On:'], id='find-me-on'),
        html.A([html.Img(src=app.get_asset_url('linkedInLogo.png'), style='height': '2rem')],
               href=linkedInURL),
        html.A([html.Img(src=app.get_asset_url('facebookLogo.png'), style='height': '2rem')],
               href=facebookURL)
    ], id='footer-links')

CSS 桌面视图：

body 
  background-color: var(--LightBlue);
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;


.navbar 
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--DarkBlue);
  color: white;


.container 
  position: relative;
  min-height: 100% ;


.dashboard-title
  font-size: 1.2rem;
  margin: .5rem;


.navbar-links ul
  margin: 0;
  padding: 0;
  display: flex;


.navbar-links li 
  list-style: none;


.navbar-links li a
  text-decoration: none;
  color: white;
  padding: 1.5rem;
  display: block;


.navbar-links li a:hover
  background-color: var(--DarkBlueHover);


.toggle-button
   position: absolute;
   top: .8rem;
   right: 1rem;
   display: none;
   flex-direction: column;
   justify-content: space-between;
   width: 30px;
   height: 21px;


.toggle-button .bar
    height: 3px;
    width: 100%;
    background-color: white;
    border-radius: 10px;


#footer 
  position: absolute;
  display: flex;
  justify-content: space-between;
  align-items: center;
  bottom: 0;
  width: 100%;
  background: var(--DarkBlue);
  color: white;
  height: 3.5rem;


#footer-links
  display: flex;


#find-me-on
  padding-right: 20px;
  font-size: .8rem;


#footer-text 
  margin: .5rem;
  font-size: .8rem;

移动端视图：

@media only screen and (max-width: 500px) 

  .dashboard-title 
    font-size: 1rem;
    padding-right: 80px;
  

  .toggle-button 
    display: flex;
  

  .navbar-links 
    display: flex;
    width: 100%;
  

  .navbar
    align-items: center;
    flex-direction: column;
    min-height:45px;
  

  .navbar-links ul 
    width: 100%;
    flex-direction: column;
  

  .navbar-links li
    text-align: center;
  

  .navbar-links li a
    padding: .5rem 1rem;
  

  .navbar-links.active 
    display: none;
  

  H2
    font-size: 15px;
  

  #footer-text 
    margin: .5rem;
  font-size: .8rem;
  

  #find-me-on
    padding-right: 15px;
  

【参考方案1】：

对于 .navbar 类，将 justify-content 属性设置为 center，因为如果将 flex-direction 设置为 column，它会“旋转”视图对象，因此 align-items 开始水平工作。

所以：

.navbar
  justify-content: center;
  flex-direction: column;
  min-height: 45px;

现在导航栏水平居中：因为您将 .toggle-button 设置为绝对值，所以它从右侧设置 1rem，而 .dashboard-title 在其父级内部居中。要解决此问题，您只需将 .navbar 类中的边距更改为 1rem，现在为 0.5rem；还要确保 .navbar 没有被其父级水平居中。

经过这些更正后，导航栏如下所示：

对于页脚，它也是 flexbox 案例。您的图像位于元素内部，因此您必须将内容垂直居中。

下图仅用于预览调试目的，请将您的 CSS 设置在您之前所做的位置。

a
  display: flex;
  align-items: center; // Now all <a> element children are centered vertically.

【讨论】：

好的，它现在在中心。现在我希望标题距离导航栏的左边框 10 像素

只需添加 align-items: flex-start;到 .navbar 元素，然后您可以为 .dashboard-title 添加一些值的 margin-left