问题标签 [adaptive-layout]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
38 浏览

c# - 缩小窗口时不触发视觉状态

我有 3 个视觉状态,带有自适应触发器。当窗户增加时,它们开火良好。但是,如果窗口从最大状态减小到较小状态,则设置器不起作用并且元素将它们的样式重置为默认值,就像它们没有视觉状态一样。

0 投票
1 回答
21 浏览

javascript - 如何以特定的屏幕分辨率在页面上显示特定元素

如何以特定的屏幕分辨率在页面上显示特定元素。网站的一种移动版本,类似于媒体查询,只会以一定的分辨率显示特定的 js (react) / html (jsx) 代码块

0 投票
0 回答
178 浏览

regex - 自适应卡片输入.日期

如何在自适应卡的 Input.Date 操作中将今天的日期设置为最小值。当用户选择日期时,所有回溯日期和以前的日期都需要被阻止,他只能选择今天之后的日期。

我用了:-

输出 但是,它不起作用。

谁能指导我应该在最小值中使用什么表达式???。

我想要这样--> 在此处输入图像描述

0 投票
1 回答
500 浏览

flutter - Flutter 灵活卡

我在卡中使用灵活的小部件时遇到问题。我使用了约束框,但我想使用不设置宽度的小部件。但是如果我使用灵活的小部件,卡片就不会再出现了。我的目标是让文本使用所有可用空间而不设置恒定宽度这是我的代码:

希望可以有人帮帮我 :)

0 投票
0 回答
35 浏览

flutter - Flutter 对 iOS 和 Android 的全平台适应性

我想为我的应用程序引入全平台适应性。目前我Material用于 iOS 和 Android 版本。我想根据检测到的平台显示适当版本的 Widget,但我不想像下面的代码示例所示那样执行此操作,因为我必须对现有应用程序执行多次。

解决方案#1

解决方案#2 幸运的是,有一些像adaptive命名构造函数这样的小部件,Switch.adaptive并且非常适合我。不幸的是,您可以用一只手的手指数数。

解决方案 #3 使用 3rd 方库和。例如,我可以PlatformButton在可能的情况下使用,而不关心引擎盖下发生了什么。

flutter_platform_widgets 1.10.0

解决方案 #4根据本教程为每个小部件 编写自定义平台特定包装器。


问题 #1 考虑到时间和可测试性,哪种解决方案是最好的?我是 Flutter 带有命名构造函数的小部件的忠实粉丝,.adaptive但我等不及 Flutter 开发团队提供更多类似的小部件

问题 #2 如何使用 Firebase 测试实验室处理针对 iOS 特定小部件的测试?我是否应该编写单元测试来检查是否呈现了正确的 iOS 版本的小部件?我看没有别的办法。

0 投票
0 回答
29 浏览

ios - iOS如何仅对纵向模式iPhone使用尺寸类?

我想在仅支持纵向模式和 iPhone(不支持横向和 iPad)的项目中使用 Size 类。对于这个客户要求我使用自适应尺寸类(应该根据 iPhone 屏幕尺寸增加或减小尺寸)所有 UI 元素,即标签、按钮、文本字段等。我阅读并发现所有 iPhone 设备的尺寸类都是紧凑宽度,纵向模式下的常规高度

链接:https ://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/

根据我的理解,大小类可以在以下 2 种情况下工作:

案例1:当您需要同时处理纵向模式和横向模式的应用程序时。

案例 2:当应用程序是通用时,即同时支持 iPhone 和 iPad。

所以我认为自适应 UI 和自适应字体在我的情况下不起作用。对于自适应 UI,我可以使用自动布局,并且可以根据主父视图定义 UI 元素大小,例如超级视图的 10% / 12% 作为高度或宽度。对于自适应字体,我认为我需要以编程方式处理它。如果我在任何一点上错了,请建议并纠正我。提前致谢。

0 投票
1 回答
29 浏览

html - Bootstrap 5 如何在行上设置断点

需要使用Bootstrap 5 for mobile screen 对下面屏幕截图中的图表进行调整

在此处输入图像描述

0 投票
1 回答
59 浏览

html - 如何在移动设备中缩放布局的高度

我正在构建一个需要在所有移动屏幕上平等使用的移动网站。

布局中的所有尺寸都是针对 1920 的 1080 屏幕获得的,而只有宽度在移动设备上正常缩放,滚动出现在高度上。我如何也可以在高度上缩放网站,避免在 css 中的任何地方使用 % ?

例子: 在此处输入图像描述

对于宽度,width=device-width使用视口,但对于高度,属性height=device-height不起作用

0 投票
3 回答
37 浏览

css - 如何正确地将图像放置在容器外,并使它们具有自适应性,HTML/CSS?

市场链接:https ://www.figma.com/file/hYoPHDHOzzgzEPo4crMmy1/UH15U7CD4WZkbhcW?node-id=2%3A334

项目链接:https ://plupiks.github.io/Real-Estate-LandingPage/

我有一个布局,它有一个建筑物的图像。此图像位于容器外部。我能够将图像从容器中取出,但我无法再对其进行调整。如果我给出 image width: 100%; height: auto;,它的尺寸不再对应于布局中指定的尺寸。

问题是,如何将图像移出容器,以便在不改变原始图像尺寸的情况下对其进行调整?

使用预处理器 SCSS。