问题标签 [adaptive-design]

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 回答
1260 浏览

php - 区分不同版本的网站

我想确保我想要优化并让我的网站非常容易维护,以适应我网站的不同版本。

我的网站有几个版本:

  • iphone/ipod/安卓等...
  • ipad/平板电脑等...
  • 其他小型设备,如旧拍手电话
  • 默认

我使用带有 MySQL 5、PHP 5 和 Apache + Memcache 的 ubuntu 服务器。

实现我的网站的最佳方法是什么,以便它们都使用相同的基本功能:

  • PHP
  • JS(通用)
  • CSS(通用)
  • ETC...?

谢谢

0 投票
8 回答
13563 浏览

responsive-design - 响应式设计与自适应设计

您能以简单的方式解释 RWD(响应式网页设计)和 AWD(自适应网页设计)之间的区别吗?

0 投票
1 回答
4944 浏览

html - 在响应式设计中使用带有显示属性的“表格”和“表格单元”?

使用表格和表格单元格

display: table;在容器和display: table-cell;子元素上使用,以在页面上水平突出显示一些帖子。

问题是,我不知道如何让它们做出响应,即随着屏幕尺寸变小,每个孩子(即table-cell)应该按比例变小,同时继续保持水平对齐。

我该怎么做呢?

0 投票
1 回答
852 浏览

responsive-design - TYPO3 和自适应图像 - 图像大小调整不起作用

我尝试使用以下方法制作响应式设计网站:

  • TYPO3
  • 基础框架
  • 扩展 adx_adaptive_images

和工作非常酷,但TYPO3根本不调整图像大小。foundation frameworkadaptive images

以前我尝试使用http://adaptive-images.com/但我遇到了同样的问题。

我使用默认.htaccess文件

有什么建议么?

0 投票
2 回答
82 浏览

jquery - Jquery点击事件使按钮消失

我正在为网站的移动版本整合一个简化的画布外导航结构。

我已经设法使一切正常,除了当单击按钮以使内容滑入页面时,我的按钮消失了。

我认为这一定是我的 sintax 中的一个简单错误,它同时影响了按钮和 DIv。不确定是什么。这是我到目前为止在 Jfiddle 上的内容:http: //jsfiddle.net/Ginmau/YUgVu/

这是HTML代码:

CSS:

最后但同样重要的是,javascript:

0 投票
1 回答
2372 浏览

css - 在设计中使用响应式或自适应 CSS

我从我的一位朋友那里听说了响应式 css 设计,他说它的优点是我们不必为不同的分辨率创建网站,我们只需创建一个 css 就可以了,这对我来说听起来很有趣所以今天我在互联网上搜索响应式设计,发现了一篇展示演示的文章,但它说我们必须提供@media我们希望我们的网站支持的分辨率,我尝试了我的示例页面中的那个,我提供了它在我的手机上@media query for (max-width:980px)运行良好,但在我的笔记本电脑上却不行。

谁能告诉我如何调整我的@media query,以便我的单曲可以在所有可用的分辨率下工作,因为通过上述方式,我必须编写相同 css 的不同版本才能在多个浏览器中生效。

0 投票
2 回答
7421 浏览

javascript - 根据移动设备更改链接

我有一个带有静态 HTML 链接的 HTML img 标签。

我的想法是根据我的用户连接的设备类型动态更改该链接(但不是图像)。我关心的主要设备类型是 PC、Google/Andriod、Ios、Amazon/Andriod。

是否有 HTML/CSS/Javascript 解决方案,或者 php/dom/server 端是唯一的选择?

0 投票
2 回答
4095 浏览

image - CSS:如何在窗口调整大小时自动调整圆形图像的大小?

我正在使用这个 CSS 创建一个 220px 宽的圆形图像,在其容器内居中(1180px 网格的 3 列跨度):

而且我知道您可以使用以下方法使图像自动重新缩放:

如何对圆形图像执行此操作?

0 投票
1 回答
418 浏览

themes - 是否可以使 Colorbox 的 iFrame 自适应?

我用 Drupal 7.22 做了一个自适应主题,效果很好。不幸的是,由 Colorbox 打开的 iFrame 的大小不是自适应的。

要打开它们,我执行以下操作:

但是宽度和高度属性是硬编码的。如何根据浏览器孔径/屏幕定义为宽度和高度属性指定不同的值?

例如,宽度在 0 到 1024px 之间的所有屏幕都应该有一个具有以下属性的颜色框 iFrame:

并且所有分辨率大于 1024px 的屏幕都应该有一个colorbox具有以下属性的 iFrame:

你对如何使这些自适应有什么建议吗?

0 投票
1 回答
1383 浏览

viewport - 如何使用视口元标记来缩放固定宽度的布局以适应不同的屏幕宽度

我正在开发一个固定宽度的旧站点,并希望通过实现几个自适应布局来为平板电脑用户创造更佳的体验。第一个布局将是 600 像素宽的设计,它将显示在屏幕宽度为 600 像素 - 768 像素的设备上。第二个自适应布局将是一个 769 像素宽的设计,它将显示在屏幕宽度为 769 - 1023 的设备上。

我想知道如何使用视口元标记使设计放大以适应宽度大于原始设计的移动浏览器。

例如,在浏览器屏幕宽度为 768px 的设备上查看 600px 设计时,如何让较小的设计占据整个屏幕宽度?

我已经找到了很多关于具有流体网格的网站的自适应布局的信息,但是没有专门讨论固定宽度网站的设计宽度和视口大小之间的关系——至少不是我能理解的。