问题标签 [adaptive-design]

在 AngularJS 中处理自适应（与响应式无关）布局的首选方法是什么？我需要做的是使用不同的共享组件（共享指令和控制器）为桌面和移动设备提供不同的布局。我正在考虑使用 ui-router，这是我现在拥有的：

index.html（主文件）：

desktop.html（桌面内容的包装器）：

mobile.html（移动内容的包装器）：

user.html（共享内容）：

应用程序.js

预览和编辑：

http://plnkr.co/edit/gRnTJkMa7hTLnffOERMT?p=preview

1. 这是进行自适应布局的首选方式吗？

2. 我怎么能（使用这种方法）：

   1. 根据移动/桌面选择在 index.html 中添加一个类
   2. 动态加载 mobile.css 或 desktop.css

此致，

谷歌搜索并找到了一个 jQuery 脚本，用于自动将 div 水平和垂直居中。

添加的内容与示例完全相同，但出于一个原因，div 不以页面加载为中心，仅在调整窗口大小时。

示例链接代码： http ://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizo​​ntally/demo.html

示例演示： http ://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizo​​ntally/3.html

我做的链接是在线的（测试）：http: //i333180.iris.fhict.nl/test/index.html

正如您可以通过 source-center.js 注意到的那样，它与给出的示例代码相同，但仅在调整窗口大小时才居中。谢谢

.mobile我正在使用 ASP.NET MVC 5。我为某些特定场景渲染了一堆视图。

我注意到 Android 上的 Mozilla Firefox 移动应用程序没有获得.mobile渲染视图的版本，所以就像 ASP.NET 没有检测到设备是移动的。

用户代理字符串是：

Mozilla/5.0（安卓；移动；rv:39.0） Gecko/39.0 Firefox/39.0

有没有办法可以全局覆盖移动检测来强制执行此操作？

我有一个 1-3 列的 GridLayout，取决于方向和屏幕大小。每个 GridLayout 项目都是带有 ImageView 和其他（带有 TextViews 等的线性布局）的垂直线性布局。图像有不同的大小。我写了一个简单的算法来裁剪图像。有时它可以正常工作（例如，当缓慢滚动时），但有时我根本看不到结果；快速滚动期间项目可能会消失。我知道 SquareImageView，但我的图像是水平的（横向），而不是方形的。我想为一行中的所有项目设置图像高度。

我的 GridView 看起来像这样：

在 setAdapter 之后：

MainHelper.adjustImgHeights：

我的代码有什么问题？

我目前正在开发 WPF 应用程序。我正在使用AdaptiveTrigger基于 s的 Visual State ManagerMinWindowWidth来创建自适应布局，这一切都由我的XAML标记定义和控制。我根本不从 ViewModel 创建或更改状态。

我定义了许多状态，我想知道是否有办法从C#后面的代码中确定用户窗口当前处于什么状态？

我已经看到了从后面的代码创建和更改视觉状态的方法，但是当视觉状态管理器完全由视图而不是 ViewModel。

感谢您花时间阅读这篇文章——真的希望有人能在这里帮助我。我有一个自适应网站（不响应），在这个页面上：

http://www.findspace.co.uk/pages/3bed-student-accommodation-newcastle.html

我在将边框顶部样式应用于 div 'containerDDbeds' 时遇到问题。我正在使用边框样式在每组属性信息之间添加一条水平线。前三个是为了说明而完成的。它在 iPhone 上看起来不错，但在 IE 中的诺基亚 Lumia 630 Windows 手机上，我得到了重复的规则（实际上可能是整个 div 上都有边框），如这个 Browserstack 仿真所示。我只需要它们在每个属性图片上方。我想知道我是否需要 IE 移动视图的 hack？该站点的桌面版本很好 - 它只是移动视图。任何帮助或指点都会受到极大的欢迎。安东尼

这是移动css文件mobile css的链接

在某些时候，我知道我需要硬着头皮认真阅读响应式和自适应设计，但我希望有一个非常简单的方法来解决这个问题。

我有以下网页，在我的桌面浏览器中显示。

这是我手机上的同一页。

虽然在这里可能很难说，但在我的手机上查看时，横幅太小了。

理想情况下，我希望这样：

• 页面内容的宽度（以及我的<footer>元素的相应宽度，它有一个上边框）在桌面全屏时不会占用浏览器的整个宽度，但会占用我手机的整个宽度.
• 横幅永远不会大于我桌面上图像的像素宽度，但会占据我小型手机的整个宽度。

有什么简化的方法吗？

对于横幅，我需要放置在同一页面上显示的图像。我作为开发人员真的很糟糕 - 所以，我用这种方式 - 但是，确实，它不起作用......

最重要的部分——

谢谢大家 ！卢多维奇

我必须这样做。适用于宽、中、小屏幕 https://pp.vk.me/c629328/v629328337/21bd7/izp9QG8Qcg4.jpg

这是我的代码

这个问题实际上不是关于编码，而是为任务选择正确的方法。我不知道这是否违反了 SO 的规则，但你去吧..

我曾经为一家当地报纸构建了一个小型 CMS，它为他们提供了添加帖子和照片的功能。关于照片，他们过去常常上传一张照片，我保存了该照片的各种版本，以根据他们可能选择的不同模板（模板而不是屏幕尺寸！）

现在，我被要求更新这个旧系统，我面临着响应/适应的困境。

就我在网上的发现而言，下一件大事是<picture>元素。我找到了很多资源，就在我决定去的时候，我来到了这个网站。如果您查看任何图像的来源，您会发现它有一个查询字符串，例如width=940&height=320&mode=crop&scale=both&meta=panoramic当我调整窗口大小时，它变成了width=300&height=200&mode=crop&scale=both&meta=square&anchor=topcenter我相信这个网站正在使用Image Resizer并且根据屏幕尺寸，正在处理一张照片由服务器即时输出新图像。

我不明白的是，这些方法中的哪一种实际上更好，因为 picture元素仍然需要将多张图片上传到服务器，而 imageresizer 只需要一张，它会裁剪调整适合屏幕尺寸的一张。但另一方面，使用该picture元素，服务器不会受到调整图像大小的请求的轰炸，而是提供现有照片以节省处理和时间？