javascript - 如何根据 <div> 宽度而不是设备宽度创建响应式内容

标签 javascript jquery html css responsive-design

我正在尝试重新创建一个可以将 html 页面(而不是浏览器窗口)调整为不同大小的菜单,以便“显示”响应代码的工作方式。你可以去这个页面看看我的意思:

http://switcher.oklerthemes.com/?theme=Porto

我正在尝试重新创建上层菜单,即带有“设备图像”的菜单,但我不知道该怎么做,而且我可以找到有关此的任何有用信息。有人知道吗?

最佳答案

一个想法是将您的所有代码包装在具有类 .container 的 div 中,其唯一的工作就是设置宽度。然后对于每个按钮,使用 javascript 调整 .container 的宽度。

这里有一个使用 jQuery 的想法:

$('#1').click(function(){
    $('.container').css('width', '100%')
});

还有一个 fiddle 来演示(注意我为此使用了 jQuery):http://jsfiddle.net/md98h19c/1/

关于javascript - 如何根据 <div> 宽度而不是设备宽度创建响应式内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32750236/

相关文章:

javascript - 如何不映射缺少子值的对象

javascript - 函数仅在刷新页面时执行,而不是在首次加载时执行

javascript - 谷歌地图标记弹出 Jquery

php - 右上角标题内容上的登录表单

javascript - 测试 Async Redux Action Jest

javascript - jQuery 和 Rails ajax 请求和响应

javascript - Linkedin api.linkedin.com/v1/people 开始返回 400 错误

javascript - 如何在javascript中查找特定日期格式的日期差异?

javascript - 使用 CSS3 根据鼠标位置平移图像方向

javascript - 仅在<选择多个>中选中