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

2017-06-07 15:36:59 +08:00
 nikoo
目前页面布局结构为 http://jsfiddle.net/hfq8qgjk/

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

如何实现右侧的内容永不与菜单重叠?
1003 次点击
所在节点    问与答
6 条回复
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%;去掉吧

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/366682

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX