当前位置：文江博客话题详情

汽车改装内容？

发布于 2024-12-22 00:31:39 字数 296 浏览 4 评论 0原文

我想知道 http://staffanstorp.se/ 如何具有流动内容的能力（我相信这就是这个术语，如果我错了，请纠正我）。我也会相应地更改标签，以便其他人在有答案时可以找到这篇文章，因为我发现很难找到任何东西。

不管怎样，我一直在网上寻找一个可能的 jquery 插件来为我做这件事。上面的网站正是我所需要的，我非常感谢您的帮助：D

我能找到的唯一的事情就是对内容进行这种类型的自动调整大小，但仅对文本进行调整，这个网站做了很多事情！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

层林尽染 2024-12-29 00:31:39

这是通过使用媒体查询结合液体 CSS 布局。

否则安装 firebug 并开始分析代码 - 一切都在现场。

回复收藏 0 原文

仄言 2024-12-29 00:31:39

这是使用 css 文件中的媒体查询来完成的。例如，

@media screen and (max-width: 1024px){
img {
    width: 400px;
    height: 400px;
    margin-left: -512px; }
}

@media screen and (max-width: 512px){
img {
    width: 200px;
    height: 200px;
    margin-left: -512px; }
}

此 css 为所有图像提供了规则，当屏幕宽度为 1024 像素或更小时，将其大小限制为 400 像素；当屏幕宽度为 512 像素或更小时，将其大小限制为 200 像素。

通过创建适用于不同屏幕尺寸的单独规则，您可以提供这种动态布局。

第二种方法是不以固定术语定义任何东西。使用％宽度等将使您的页面适合任何尺寸，然后当屏幕变得太小时，您可以使用上面的媒体查询来移动内容。

希望这有帮助。

This is done using Media queries within the css file. eg

@media screen and (max-width: 1024px){
img {
    width: 400px;
    height: 400px;
    margin-left: -512px; }
}

@media screen and (max-width: 512px){
img {
    width: 200px;
    height: 200px;
    margin-left: -512px; }
}

This css provides rules for all images to limit their size to 400px when the screen is 1024px or less wide and limiting them to 200px when the screen is 512px or less wide.

By creating separate rules that work for different screen sizes you can provide this kind of dynamic layout.

The second way is by not defining anything in fixed terms. Using % widths etc will allow your page to fit any size and then you can use the media queries above to move content around when the screen becomes too small.

Hope this helps.

回复收藏 0 原文

~没有更多了~