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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 2728 天前的主题，其中的信息可能已经有所发展或是发生改变。

目前页面布局结构为 http://jsfiddle.net/hfq8qgjk/

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

如何实现右侧的内容永不与菜单重叠？

6 条回复 • 2017-06-07 16:07:34 +08:00

suinia

2017-06-07 15:49:53 +08:00

那就换算下是 200/0.25*1 = 800;
@media screen and (max-width: 800px) { margin-left:200px}

learnshare

2017-06-07 15:56:40 +08:00

菜单不应该是独立的层，覆盖在文字上么

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

2017-06-07 16:01:25 +08:00

@suinia 兄弟，你太灵了！请问公式中 200/0.25*1 这个 *1 是什么意思？

nikoo

2017-06-07 16:01:50 +08:00

@liyer 这样就破坏相应布局了，menu 的宽度是响应式的，并不是固定 200px，只是最小 200px

suinia

2017-06-07 16:07:34 +08:00

@nikoo 我就是算 25%的情况下,外框多少才是 200。那就是 200/0.25 咯。顺带写上 1,就是表达乘以 100%；去掉吧