【问题标题】:HTML elements changing positions on browser resizeHTML元素在浏览器调整大小时改变位置
【发布时间】:2012-07-23 03:21:29
【问题描述】:

为什么this video 中浏览器上移动的框和图像会调整大小?

这是我的代码:

style="width: 98pt; position: fixed; left: 112pt; bottom: 175pt"

【问题讨论】:

    标签: html css layout responsive-design


    【解决方案1】:

    因为...

    它的设计很灵活。

    制作方法

    根据this other answer

    • 对页面和元素的尺寸使用基于百分比的宽度,而不是像素。

    • 使用 em 代替 px 或 pt。

    • 尽量不要使用图像进行导航,或者如果使用,请使用滑动门方法使它们可扩展。阅读:#1

    • 阅读流式布局:#2#3

    走得更远

    如果你想了解更多,我推荐这本书:

    Responsive Web Design 来自 Ethan Marcotte。

    【讨论】:

    • 从视频中可以看出,我正在尝试做的是将侧边栏偏移几英寸并使其固定。液体布局可以做到这一点吗?
    • 当然可以。如果您使用的是 Bootstrap:Fluid Grid SystemStatic navbar
    • 所以我在引导程序中所做的只是调用导航栏样式?我是否能够设置 html 结构的样式以适应我的需求,就像我在视频中的那样?
    • 这很有趣。我从来没有用过这样的造型师。不过,我已经弄清楚了它背后的逻辑。
    • 我能把它固定在中间,向左 30 度吗?他们为此提供周界吗?这最终是我想要做的。
    【解决方案2】:

    因为它们附在容器的底部(可能是 body 标签?)

    使用“top:###pt”而不是“bottom:175pt”。

    我认为最好指定它的高度。

    <body>
    
      <div style="position:fixed; top: 50px; left: 50px; width: 100px; height: 100px;">content</div>
    
    </body>
    

    【讨论】:

    • 需要查看您正在使用的 HTML 和 CSS
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-12-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-03-12
    相关资源
    最近更新 更多