MDL中大屏幕和小屏幕的MDL-layout__折叠器不同
MDL（Material Design Lite）是一种基于谷歌Material Design设计语言的前端框架，用于构建具有现代化外观和交互效果的网页应用程序。MDL-layout__折叠器是MDL框架中的一个组件，用于在大屏幕和小屏幕上实现不同的布局。
在大屏幕上，MDL-layout__折叠器通常用于创建具有侧边导航栏和主要内容区域的布局。折叠器可以在侧边导航栏上显示图标和文本，并且可以通过点击或滑动来展开或折叠导航栏。这种布局适合于桌面电脑和大屏幕设备，提供了更多的空间来展示内容和功能。
在小屏幕上，MDL-layout__折叠器的作用是创建一个响应式的布局，以适应移动设备和小屏幕。在这种布局中，折叠器通常用于创建一个顶部导航栏，其中包含一个折叠按钮，点击该按钮可以展开或折叠导航菜单。这种布局可以确保在小屏幕上，导航菜单不会占据太多的空间，同时保持用户友好的交互体验。
MDL-layout__折叠器的优势在于它提供了一种简洁、直观的方式来管理和切换布局，使得网页应用程序在不同屏幕尺寸和设备上都能够良好地展示和使用。
应用场景包括但不限于：
- 响应式网页设计：MDL-layout__折叠器可以帮助开发者在不同屏幕尺寸上实现一致的布局和导航体验。
- 移动应用程序：MDL-layout__折叠器适用于构建移动应用程序的界面，提供简洁的导航和布局管理。
- 网页应用程序：MDL-layout__折叠器可以用于构建各种类型的网页应用程序，包括管理后台、博客、电子商务等。
腾讯云相关产品中，可以使用腾讯云的Web+服务来部署和托管基于MDL-layout__折叠器的网页应用程序。Web+是腾讯云提供的一站式Web应用托管和运维解决方案，支持快速部署、自动化运维和弹性扩展。您可以通过以下链接了解更多关于腾讯云Web+的信息： https://cloud.tencent.com/product/webplus
请注意，以上答案仅供参考，具体的技术实现和产品选择应根据实际需求和情况进行评估和决策。
相关·内容
1回答
MDL中大屏幕和小屏幕的MDL-layout__折叠器不同
html、css、material-design、material-design-lite
我，正在尝试创建两个不同的mdl布局__抽屉为小屏幕和大屏幕。根据下面的代码，只有在小屏幕上，mdl-layout__drawer才会显示它在大屏幕上不显示。<div class="mdl-layout__drawer mdl-layout--large-screen-only">
<span class=&q
浏览 13提问于2017-08-18得票数 2
2回答
如何编程点击"mdl-layout--fixed-header“菜单按钮
material-design-lite
我有一个按钮，我想打开mdl-layout__折叠器。例如，请参阅并注意，菜单图标在单击时会打开抽屉。$(".material-icons:contains('menu')").click(
浏览 0提问于2015-09-22得票数 0
2回答
无法理解MDL布局与MDL网格组件之间的关系
material-design-lite
来自
使用MDL布局原则可以通过提供可重用的组件简化可伸缩页面的创建，并通过建立可识别的可视元素、坚持逻辑结构网格以及在多个平台和屏幕大小之间保持适当的间距来鼓励跨环境的一致性。“
网格：“<
浏览 0提问于2015-11-08得票数 0
回答已采纳
6回答
如何使图标在MDL头上向左移动？
html、css、material-design-lite
我试着设置页边距，填充移回箭头图标到标题的左边，但失败了。我该怎么做才能纠正这个问题？<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> <button class="mdl-button mdl
浏览 6提问于2015-07-11得票数 6
回答已采纳
2回答
Angular2 material lite固定标题不起作用
angular、material-design-lite、angular2-mdl
我正在尝试使用我的角度cli项目中的材料精简固定标题，标题是渲染所有的链接，但不是固定的。我的app.html：我的home.html：<app-services></app-services><app-c
浏览 22提问于2017-06-23得票数 0
2回答
在UISheetPresentationController中定制较小的支架？
ios、uiviewcontroller、uikit、bottom-sheet、uipresentationcontroller
苹果终于在2021年的iOS 15中发布了一款iOS“底片”控件：。但是，API中没有small()止回器。Apple和类似的应用程序通常在屏幕底部显示一个小的、完全折叠的工作表，它可以
浏览 3提问于2021-06-09得票数 30
2回答
如何开发小屏幕、高密度设备的应用程序？在我的例子中，我有华硕zenfone2，它有5.5个屏幕和414 ppi密度，这意味着它是xxhdpi设备，但另一部手机有5英寸屏幕，密度为441 ppi，那么它是钢xxhdpi还是普通xxhdpi？我不知道xxhdpi，normal-xxhdpi，大xxhdpi之间的区别。如何开发不同屏幕大小的应用程序？
浏览 5提问于2017-02-20得票数 0
回答已采纳
1回答
当切换到小屏幕时，打开抽屉
javascript、material-design-lite
我试着用材料设计Lite并制作了一个小界面。现在我面临一个问题-我需要使抽屉始终打开，当窗口加载和窗口从大屏幕到小。默认情况下，抽屉总是以关闭状态开始..。我发现，当我点击抽屉按钮(屏幕截图上的粉红色)时，会有一些变化。我试着像这样使用QuerySelector：obfuscator.className=
浏览 1提问于2016-05-30得票数 0
回答已采纳
4回答
如何使MDL中较小屏幕的标题可滚动？
html、css、material-design-lite
使用MDL1.0()，我正在尝试使标题在更大、更小的屏幕上滚动。但是它只能在大屏幕上滚动(比如在我的电脑上)，而不能在小屏幕上滚动。-- Your content goes here --></div> </main></body>
正如您所看到的
浏览 6提问于2015-07-08得票数 8
回答已采纳
1回答
对于不同的屏幕大小，引导网格无法按预期工作
css、twitter-bootstrap、responsive-design
我有四个版本的映像，每个版本对应于默认的Bootstrap 3断点。当使用桌面浏览器时，图像的表现与我所期望的差不多(在不同的屏幕尺寸上显示图像的正确版本)。但当我在其他设备(盖乐世S2手机、Nexus7平板电脑、iPad视网膜显示屏)上进行测试时，我没有得到预期的结果。
例如，盖乐世S2手机号称有480x800px的屏幕。Bootstrap文档()说小屏
浏览 0提问于2015-03-04得票数 0
2回答
Openui5移动设备拆分应用程序菜单按钮不可见
android、sapui5
我已经开发了拆分应用程序，它在桌面和平板电脑上运行良好，但在移动设备上，拆分应用菜单按钮不可见，母版页完全覆盖。
浏览 15提问于2017-08-17得票数 1
1回答
如何让twitter-bootstrap导航栏子项在小屏幕上折叠/展开？
css、twitter-bootstrap、drop-down-menu、navbar、handhelddevice
冒着描述显而易见的事实的风险。在小屏幕上，当导航栏菜单被激活时，只有第一级项可见，子项被折叠。当点击具有子项的项时，子项将展开并变为可见。也可以通过再次点击父对象来折叠它们。不幸的是，当导航栏在一个小屏幕上被激活时，它会扩展许多子项。点击父项目不会展开/折叠其子项目。
如何让twitter-bootstrap导航栏子项在小屏幕上折叠&#
浏览 5提问于2013-04-06得票数 4
2回答
材料设计灯。网格系统意外行为
css、twitter-bootstrap、material-design-lite、grid-system
首先是一幅画：这是来自的屏幕。我不能理解这种行为。我很难过，因为我想要一行3列，每一列的宽度等于行宽的1/3。但在某些屏幕分辨率中，列的宽度等于行宽的一半。这来源于基于媒体查询的css指令，似乎是设计出来的。我是从鞋带来的，我没有这个问题。
浏览 2提问于2016-08-20得票数 0
回答已采纳
1回答
CSS3 - Android: translate3d(0，0，0) -强制硬件加速
android、css、css-selectors、css-transforms
我最近在为安卓开发的一个应用程序上遇到了一个性能问题，尽管清单中的hardwareAccelerated标签已经启用。<script> elem.style.display = 'block';然后，我发现了一个我
浏览 2提问于2014-06-17得票数 1
1回答
这种PageAdapter行为能在iOS中实现吗？
android、ios、user-interface
在上，屏幕顶部有一个显示栏，用户可以在三个不同的屏幕之间左右滑动: Home、Discover和Activity (见图1)。
当用户向下滚动时，整个条形会折叠到蓝线的大小，直到用户再次向上滚动为止。为大量的图像道歉。
浏览 2提问于2014-01-16得票数 2
回答已采纳
1回答
引导肚脐折叠成2个汉堡包菜单
twitter-bootstrap、menu、navbar
我一直在寻找和试验大量的引导导航条，但一直无法得到我正在寻找的东西。
在大屏幕上，我可以制作一个很好的导航条，里面有很多内容。在一个中等屏幕上，我希望将该内容的一部分折叠成“常规菜单”，其余内容几乎不变。在一个小屏幕上，我希望剩下的折叠成另一个汉堡包，或者搜索图标，这样我就会在顶部的条形上留下两个可折叠的菜单。更好的</
浏览 2提问于2016-10-03得票数 1
回答已采纳
2回答
inline-block是有史以来最可怕的CSS标签。(这意味着我昨晚才学会了它的工作原理。但后来我扔掉了几十行HTML，而不是它。)它能阻止再流！当屏幕太小时，我们如何写一个横幅，将其折叠成不同的顺序？[ A ][ B ][ C ][ C ][ A ]
浏览 1提问于2014-05-19得票数 1
回答已采纳
1回答
试图了解水平窗体是如何工作的
twitter-bootstrap、twitter-bootstrap-3
input type="submit" class="btn btn-default" value="Register" /> </div>我了解到，当浏览器视图端口是中等或更大时，标签将显示在与关联控件相同的行上。我不明白的是，当视图端口很小或xs时，为什么表单会恢复为垂直形式呢？我不是专门让它这么做的。这只是默认的引导行为吗？另外，如果我要
浏览 1提问于2014-03-27得票数 1
回答已采纳
2回答
如何判断是否折叠了导航条，以便在导航栏列表中切换项目
jquery、css、angularjs、twitter-bootstrap、twitter-bootstrap-3
我想：
<nav class="navbar navbar-idebaca navbar-fixed-bottom
浏览 4提问于2014-06-27得票数 0
1回答
颤动小部件在所有屏幕上显示
android、ios、flutter、dart
我有音乐列表屏幕，当按下播放音乐时，小音乐播放器显示在屏幕的末尾。如果单击或向上滚动，将显示全屏音乐播放器。用户可以单击按钮来折叠全屏音乐播放器。所以我的问题是，如果音乐正在播放，我想在应用程序的每个屏幕上显示小音乐播放器。 我可以知道如何放置SlidingUpPanel吗？ 向你致敬，亚历克斯 ?
浏览 14提问于2021-09-17得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
