问题标签 [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 投票
2 回答
2209 浏览

swift - 更新方向变化的约束

下面是纵向模式的视图(图 1)和我想显示的横向视图(图 2)。我面临着在风景中正确显示的问题。

图 1: 在此处输入图像描述

我在情节提要中有设置约束。

图 2:在此处输入图像描述 我尝试修改约束,但是当我将设备转为横向时,greenView 变成了屏幕的 1/4。下面是代码。

0 投票
1 回答
36 浏览

ios - 为自适应布局中的元素赋予宽度

我实现了一个堆栈视图并设置填充 - 与垂直轴一样填充。对于横向模式,我使用常规宽度和紧凑高度填充 - 用水平轴填充。我想在横向模式下为 stackview 的第一个元素提供静态宽度。当我在横向模式下给定宽度时,它会影响纵向模式并将宽度给纵向模式。我可以给一个仅宽度的陆地空间模式吗?

我加了一张照片。我想删除常量值或设置为标准值等。

在此处输入图像描述

当给定宽度时,它会影响 posrtrait 模式,如下图所示

在此处输入图像描述

在此处输入图像描述

提前致谢

0 投票
2 回答
60 浏览

html - 针对移动设备的适配,谷歌看不出是自适应的

(谷歌翻译)

https://elenanovias.com/en/

有一个网站,我是在手机下适配的,但是search.google说这个网站不自适应

viewport

<meta name="viewport" content="width=device-width, initial-scale=1 , maximum-scale=1.0, user-scalable=yes ">

我在 joomla 2.5 上做了一个网站。我读了一些东西,也许这就是问题所在?注意:Joomla!自 2014 年 12 月起,2.5 版生命周期结束。Joomla!3.x 开箱即用,对移动设备友好。

在我使用的样式中:

@media only screen and (max-width: 768px) {

不是

@media (max-width: 768px)

需要更多信息,写。

我的网站

谷歌

另一张照片

0 投票
1 回答
33 浏览

xamarin.ios - 让 UI 适应 iPhone 和 iPad

我正在开发一个 xamarin 应用程序,目标是让 UI 适应手机和平板电脑,到目前为止,Android 似乎有一种更简单的方法来实现这一点。我正在阅读有关此事的这篇文章,老实说,它没有一点意义。

我想要的只是让所有的东西都随着屏幕尺寸的增大而逐渐增长到视图中(就像 android 一样),每次我尝试这样做时,它都会将控件锚定在右侧,然后将其拖动到右侧.

我主要只是需要一些简单的解释,说明我如何让一切都随着视图而增长。

0 投票
1 回答
887 浏览

html - Bootstrap 4 上的自适应布局:超小型移动设备支持的最低屏幕分辨率是多少?

Bootstrap 4文档 说:

超小型设备(纵向手机,小于 576 像素)

很明显,超小是屏幕宽度小于 576 像素的设备。好吧,少于 576 像素……还有多少?网格不能减少到零。使用 Bootstrap 网格的布局可以在没有明显设计扭曲的情况下被压缩。此外,有些设备的屏幕宽度远小于 576 像素(320 或 240 像素)。

如果我们在数学上将超小型设备支持的屏幕宽度表示为一个间隔,我们会得到[a, b)b = 576根据文档.. 那么......a等于什么?该文档未涵盖此问题。

下面的代码示例中有一个自适应标题(具有行和 12 列的容器流体)。在Chrome中的开发人员工具中,我找到了a = 360网格尚未扭曲的最后一个值(使用a = 359,第 12 列不适合宽度并转到“新行”)。

当然,我可以重置填充,然后一切都适合 320 和 240 像素,但这个解决方案并不是开箱即用的:

360 像素真的是 Bootstrap 4 中支持的最小屏幕宽度吗?

快速查看示例:

简单复制到文本编辑器的相同代码(也许有人想查看开发工具):

0 投票
4 回答
726 浏览

ios - 使用 Size Classes 时如何处理安全区域?

我刚刚创建了一个简单的红色视图并为其创建了 4 个约束(上、左、右、下)。我正在尝试使用尺寸类进行自适应布局,但无法以“横向”方向实现正确布局:

  1. 在纵向模式下,一切都是正确的。底部,左侧,右侧边缘到超级视图的边缘,顶部边缘到安全区域的顶部。
  2. 在横向左侧模式下,一切都是正确的。顶部,右侧边缘到超级视图的边缘,左侧和底部到安全区域的边缘。
  3. 但在横向右模式布局不正确。我希望,左边缘将等于 superview 的左边缘,但实际上它等于安全区域。右边缘也一样:我希望它等于安全区域的边缘,但实际上它等于超级视图的边缘。如何解决

界面生成器截图 人像模式 横向左 横向右

0 投票
0 回答
204 浏览

css - 相对于全局容器放置绝对定位的下拉菜单

我有这个 html 代码:

在按钮单击下拉列表(元素“菜单”)显示。这个下拉菜单有“位置:绝对”。我的所有页面都有条件地限制在容器中,并且任何内容都不应位于此容器之外,包括下拉菜单。我可以在没有 JavaScript 的情况下使下拉菜单相对于按钮位于中心,但不能超出容器吗?

这是我的CSS:

这是我的代码结果

如果我删除“.dropdown > menu”上的“right”属性

0 投票
1 回答
878 浏览

vue.js - 如何使用 vuetify 制作自适应网站?

我想用 vuetify 制作一个自适应网站:https ://vuetifyjs.com/en/

因此将提供几个版本的网站,这些版本将根据设备使用。

自适应设计将提供几种不同尺寸的设计,即 320、480、760、960、1200 和 1600 像素。

所以大约有 6 种不同的尺寸。这是否意味着我将制作 6 种类型的网络?

我阅读了 vuetify 的文档https://vuetifyjs.com/en/styles/float#responsive。但似乎它只是响应式网站。没有自适应网站

我对使用 vuetify 实现自适应网站感到困惑

我知道响应式网站。但对于这种情况,我想为我的项目实施自适应网站

0 投票
2 回答
218 浏览

css - Align list items horizontally in adaptive design

Please see the JSFiddle.

This is an adaptive design with "vw" parameters in the code. I want Text_1, Text_2 and Text_3 be aligned horizontally, which means that when i change the browser's window size, the distance from the left side of the screen to the beginning of the text is the same for those 3 words. With the current code I align them (via "margin" property), but as soon as the browser's window size changes, Text_2 and Text_3 move relatively to Text_1 (to the right when window size dicreases, to the left when it increases). What is wrong in the code please?

0 投票
1 回答
256 浏览

adaptive-cards - 在自适应卡中设置定时器

我正在尝试构建一个带有计时器的微软自适应卡,一旦计时器自动到期,就应该调用一个动作。这在自适应卡中可能吗?