[英]Responsive design - reverse css effect between the mobile & desktop layout in this case
在当前情况下，菜单在桌面布局中展开，而菜单在移动布局中隐藏。
我的问题是如何做到以下几点？
$('#nav-toggle').click(function() { $('nav').toggleClass("active"); });
* { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html, body { font-family: sans-serif; font-size: 100%; } #top-bar { position: relative; max-width: 1000px; height: 85px; background-color: #22bbff; margin-left: auto; margin-right: auto; } #nav-toggle { float: right; display: block; border-left: 1px solid #fff; } nav { float: right; } .active ul { display: block; } ul { position: absolute; display: none; top: 60px; right: 0; width: 150px; list-style-type: none; background-color: #22bbff; border: 1px solid #fff; text-align: center; } li { display: block; } a { display: block; padding-top: 21px; padding-right: 40px; padding-left: 40px; padding-bottom: 21px; color: #fff; text-decoration: none; background-color: #294C52; border: 1px solid #fff; } a:hover { background-color: #1BBC9B; border: 1px solid #fff; } @media screen and (min-width: 767px) { nav { position: relative; float: right; right: 50%; } #nav-toggle { display: none; } ul { position: relative; float: right; display: block; top: 0; right: -50%; width: auto; height: 60px; list-style-type: none; border: none; } li { float: left; display: block; } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <div id="top-bar"> <a href="#" id="nav-toggle">M</a> <nav> <ul> <li><a href="#">Link 1</a> </li> <li> <a href="#">Link 2 <i></i></a> </li> <li><a href="#">Link 3</a> </li> </ul> </nav> </div>
如果您想与示例相反（普通浏览器上的小折叠菜单，移动设备上的完整菜单），则可以将@media查询从使用min-width更改为：
@media screen and (max-width: 767px) {
样品 。 但是，当视口变得太窄时，这将破坏菜单的布局。
就像我在下面使用原始CSS所做的那样，您总是可以反转应用于桌面视图和目标媒体查询的CSS样式。
您将需要在桌面视图中为下拉菜单自定义CSS（尽管行为正确，但当前视图可能不想要）。 您可以使用其他CSS类来执行此操作。 只需检查您的浏览器控制台以获取指导。
$('#nav-toggle').click(function() { $('nav').toggleClass("active"); });
* { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html, body { font-family: sans-serif; font-size: 100%; } #top-bar { position: relative; max-width: 1000px; height: 85px; background-color: #22bbff; margin-left: auto; margin-right: auto; } nav { position: relative; float: right; right: 50%; } #nav-toggle { display: none; } ul { position: relative; float: right; display: block; top: 0; right: -50%; width: auto; height: 60px; list-style-type: none; border: none; } li { float: left; display: block; } a { display: block; padding-top: 21px; padding-right: 40px; padding-left: 40px; padding-bottom: 21px; color: #fff; text-decoration: none; background-color: #294C52; border: 1px solid #fff; } a:hover { background-color: #1BBC9B; border: 1px solid #fff; } @media screen and (min-width: 767px) { #nav-toggle { float: right; display: block; border-left: 1px solid #fff; } nav { float: right; } .active ul { display: block; } ul { position: absolute; display: none; top: 60px; right: 0; width: 150px; list-style-type: none; background-color: #22bbff; border: 1px solid #fff; text-align: center; } li { display: block; } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <div id="top-bar"> <a href="#" id="nav-toggle">M</a> <nav> <ul> <li><a href="#">Link 1</a> </li> <li> <a href="#">Link 2 <i></i></a> </li> <li><a href="#">Link 3</a> </li> </ul> </nav> </div>
首先添加这个
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
因为您想使其具有响应性...所以例如如何使用它
<body>
<div class="container">
<h2>Table</h2>
<p>The .table-responsive class creates a responsive table which will scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:</p>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna</td>
</tr>
<tr>
<td>2</td>
<td>Debbie</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
因此，如果您将某个类或其他容器留在该容器的“表响应”之外，那就不再响应了...
创建一个Cookie，记住页面是否应加载响应式设计的移动版或桌面版
[英]Create a Cookie Remembering if Page Should Load Mobile or Desktop Layout of a Responsive Design
自适应网页设计在台式机上运行，但不在移动设备上运行，因此不会加载CSS和JavaScript
[英]Responsive web design is working on desktop but not on mobile device it wont load CSS and JavaScript
响应式设计-使用JavaScript和CSS更改布局（Flex和媒体查询）
[英]Responsive design - Change layout with javascript and css (flex and media-queries)
响应式设计可在桌面浏览器，移动模拟器（Safari和Mozilla Firefox）上运行，但不能在真正的智能手机（Android，iOS）上运行
[英]Responsive design working on desktop browser, on mobile-simulator (both Safari and Mozilla Firefox), but not on a real smartphone (Android, iOS)
当移动设计非常不同（也就是不能使用网格布局）时，如何处理组件的桌面布局和移动布局？
[英]How to handle desktop vs mobile layout for a component when the mobile design is VERY different (aka cannot make use of grid layout)?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.