Questions tagged «responsive»

我有2个div：在页面的左侧是一个，在右侧是一个。左侧的一个宽度固定，我希望右侧的一个填充剩余空间。 #search { width: 160px; height: 25px; float: left; background-color: #ffffff; } #navigation { width: 780px; float: left; background-color: #A53030; } <div id="search">Text</div> <div id="navigation">Navigation</div> 运行代码段隐藏结果展开摘要

419 html  css  width  responsive 

无论其内容如何。 是否有可能做到这一点？

170 html  css  responsive 

我目前正在为一家公司制作移动目标网页。这是一个非常基本的布局，但是在标题下方有一张产品图片，该图片始终为100％的宽度（设计表明，该图片始终从一条边到另一条边）。根据屏幕的宽度，图像的高度显然会相应地进行调整。我最初是使用img（CSS宽度为100％）完成此操作的，效果很好，但我意识到我想使用媒体查询根据不同的分辨率提供不同的图像-假设尺寸较小，中等，例如，同一张图片的大版本。我知道您无法使用CSS更改img src，因此我认为应该为图像使用CSS背景，而不是HTML中的img标签。 我似乎无法正常工作，因为带有背景图片的div既需要宽度也需要高度来显示背景。我显然可以使用“宽度：100％”，但是高度该怎么用？我可以设置一个随机的固定高度，例如150px，然后可以看到图像的顶部150px，但这不是解决方案，因为没有固定高度。我玩过一次游戏，发现一旦有一个高度（用150px测试），我可以使用'background-size：100％'将图像正确地放入div中。我可以将较新的CSS3用于该项目，因为它仅针对移动设备。 我在下面添加了一个粗略的示例。请原谅内联样式，但我想举一个基本的例子来尝试使我的问题更清楚一些。 <div id="image-container"> <div id="image" style="background: url(image.jpg) no-repeat; width: 100%; height: 150px; background-size: 100%;"></div> </div> 是否可能需要根据整个页面给容器div设置一个百分比高度，还是我认为这是完全错误的？ 另外，您认为CSS背景是执行此操作的最佳方法吗？也许有一种技术可以根据设备/屏幕宽度来提供不同的img标签。通常的想法是，目标网页模板将与不同的产品图片一起使用多次，因此我需要确保以最佳方式开发这种模板。 我很抱歉，这有点冗长，但是我从这个项目来回到下一个项目，所以我想把这件事做完。在此先感谢您的宝贵时间，不胜感激。问候

89 html  css  background-image  responsive  responsive-images 

我有一个使用React组件的复杂网页，并且正在尝试将该页面从静态布局转换为响应更快，可调整大小的布局。但是，我一直遇到React的限制，并且想知道是否存在用于处理这些问题的标准模式。在我的特定情况下，我有一个使用display：table-cell和width：auto呈现为div的组件。 不幸的是，我无法查询组件的宽度，因为您无法计算元素的大小，除非将元素实际放置在DOM中（该元素具有推断实际呈现的宽度的完整上下文）。除了将其用于诸如相对鼠标定位之类的事情之外，我还需要它来在组件内的SVG元素上正确设置宽度属性。 另外，当窗口调整大小时，如何在设置过程中将尺寸变化从一个组件传递到另一个组件？我们正在shouldComponentUpdate中完成所有所有的第三方SVG渲染，但是您无法在该方法中设置自己或其他子组件的状态或属性。 是否有使用React处理此问题的标准方法？

86 javascript  reactjs  responsive