问题标签 [responsive-design]

我想以与 CSS 媒体查询相同的方式在 Silverlight 中创建响应式布局，但使用 XAML 和 C#。有没有人做过类似的事情，可以就最佳方法提供建议？使用 CSS/HTML 的响应式设计示例：http: //mediaqueri.es/

理想情况下，我认为我需要有 3-4 个单独的 XAML 样式文件。一个带有一组基本样式，然后每个屏幕宽度/阈值一个，我们需要调整样式（尚未确定）。然后需要一些代码，当浏览器窗口宽度小于 480px 时使用 480styles.xaml，当浏览器宽度为 481px 到 768px 时使用 768styles.xaml ......等等。

我是一名 UI 设计师而不是一名开发人员，因此我对代码一窍不通，所以如果解释得不好或者根本不可能，我深表歉意。提前感谢您提供的任何帮助！

我在此线程上阅读： 检测移动设备的最简单方法， 了解如何知道浏览器是否为移动设备。一般代码是这样的：

问题是我想处理平板电脑（iPad 和 xoom）。

我在那里看到有一个我已经测试过的 isIpad() 函数——但这仍然不能解决平板电脑和手机之间的区别。

任何的想法？

谢谢， 阿隆

Let's say I just want to target every tablet and phone, regardless of size, is there a media query for this? Is it possible to do this without specifying a size? Or is using a size the only way to target mobile devices, and not desktops?

我正在开发一个网站，并希望为用户提供移动和桌面友好的体验。

来自基本的 html5/css/js 开发，我知道足够多的 css 技巧、移动优先技术、流动布局和媒体查询，可以很好地相处，但要进一步优化解决方案，并考虑到我目前开始使用 . net/mvc(incl. razor) 我正在寻找新的选择。

我已经阅读了有关设备检测技术（目前偏爱http://51degrees.codeplex.com/）的信息，现在我正在尝试找出我必须为所有用户优化我的网站的选项。

我不希望移动用户加载大版本的图像和不必要的脚本/样式表/背景图像等，也不希望像“移动优先”方法那样覆盖所有移动样式表。

当我刚刚开始工作/学习如何使用 MVC 模式时，我在问你：是否可以使用 MVC 模式/开发来构建一个组合网站（不是桌面版和移动版）并包含 javascript、图像 url ，样式表等基于用户客户端/设备，使用“if else”和一个选项让用户按需切换到完整版本。

我正在设计一个响应式布局，并使用以下 CSS 在背景顶部放置了一个 grungy png 叠加层：

这样，无论页面宽度如何，图像始终居中。当浏览器窗口缩小到小于#bg覆盖的背景图像的宽度时，就会出现我的问题。出现一个水平滚动条，背景向右延伸很远（尤其是当浏览器非常小时）。

你可以在这里看到一个演示：http: //pixelcakecreative.com/cimlife/responsive2/

如您所见，出现水平滚动条，我希望浏览器窗口缩小而不保留图像的整个宽度！有任何想法吗？

我从网络社区听到了一些关于人们在内部使用的抱怨，maximum-scale=1.0因为meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;它阻止了人们放大。

我使用它的原因是，一旦移动设备变成横向，事情似乎会重新调整，影响布局。

我的第一个问题是：最大规模真的那么糟糕吗？

其次，当我不想让 iPhone 或智能手机自动调整内容时，有什么替代方法可以阻止它？

谢谢

我最近启动了我的网站的响应版本，但是我发现包含许多单行文本的百分比宽度划分看起来非常糟糕，因为在桌面和移动视图中将所有内容都放在一行上会导致每一行文本太长或太短。

我的标记是一个无序列表的链接（带有长锚文本） - 有没有人有任何建议根据包含分区的宽度截断锚文本？

我正在设计一个响应式布局，由于某种原因，当浏览器调整到 767px 以下（或在移动设备上）时，会出现一个水平滚动条。我似乎无法弄清楚是什么导致它或如何摆脱它。不应该存在的内容右侧有额外的空间。

你可以在这里看到一个演示：http: //pixelcakecreative.com/cimlife/responsive2/

有什么修复吗？

我有一个带有填充和固定宽度侧边栏的流体内容区域。我想要float: right一个图像并给它一个margin-right等于容器的负数，padding以使浮动图像紧靠侧边栏。

代码值一千字……

这是一个显示问题的简化测试用例：http: //jsfiddle.net/alexdunae/34ZDw/3/ - 缩小或展开预览窗格以查看。

看来我的负保证金计算必须在某个地方关闭。任何帮助深表感谢。

我希望这个问题不会因为过于广泛的主题而被关闭，但我想知道响应式/自适应网页设计，即一个适用于所有浏览器、所有设备的网站。

在结构和布局方面，实施这样一个网站的最佳方式是什么？

我一直在尝试阅读它，因为移动网站现在是一件大事，并且会持续一段时间，但我找不到提示和指南列表，我想如果这样的资源在 SO 上可用那么我们都可以受益。

另一个让我印象深刻的是动态图像缩放是如何完成的？

在所有事情中，这是最让我困惑的事情，因为我猜测的布局可能是使用百分比而不是像素值来完成的，因为像素会因设备而异，但图像可能是实现一个网站的关键因素。

我期待阅读人们的意见和答案，即使它只是指向我尚未找到的网络教程的链接。