V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
nikoo
V2EX  ›  问与答

一个前端动态响应式布局的问题

  •  
  •   nikoo · 2017-06-07 15:36:59 +08:00 · 993 次点击
    这是一个创建于 2526 天前的主题,其中的信息可能已经有所发展或是发生改变。
    目前页面布局结构为 http://jsfiddle.net/hfq8qgjk/

    菜单宽度最低为 200px,现在的问题是窗口宽度较低时,右侧的内容会与菜单重叠(可以拖拽窗口宽度来测试)

    如何实现右侧的内容永不与菜单重叠?
    6 条回复    2017-06-07 16:07:34 +08:00
    suinia
        1
    suinia  
       2017-06-07 15:49:53 +08:00   ❤️ 1
    那就换算下是 200/0.25*1 = 800;
    @media screen and (max-width: 800px) { margin-left:200px}
    learnshare
        2
    learnshare  
       2017-06-07 15:56:40 +08:00
    菜单不应该是独立的层,覆盖在文字上么
    liyer
        3
    liyer  
       2017-06-07 15:56:44 +08:00
    .menu{position:fixed; width:200px; left:0; top:0; bottom:0;}
    .content{padding-left:200px;}
    nikoo
        4
    nikoo  
    OP
       2017-06-07 16:01:25 +08:00
    @suinia 兄弟,你太灵了!请问公式中 200/0.25*1 这个 *1 是什么意思?
    nikoo
        5
    nikoo  
    OP
       2017-06-07 16:01:50 +08:00
    @liyer 这样就破坏相应布局了,menu 的宽度是响应式的,并不是固定 200px,只是最小 200px
    suinia
        6
    suinia  
       2017-06-07 16:07:34 +08:00   ❤️ 1
    @nikoo 我就是算 25%的情况下,外框多少才是 200。那就是 200/0.25 咯。顺带写上 1,就是表达乘以 100%;去掉吧
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1452 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 23:49 · PVG 07:49 · LAX 16:49 · JFK 19:49
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.