草庐IT

javascript - 响应式网格布局框架

coder 2024-05-08 原文

就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the help center寻求指导。




10年前关闭。




我想要一个易于使用的网格框架用于我当前的 Web 元素。这些是我会欣赏的功能:

  • 流体网格布局 :可以水平对齐(并排)的框，每个具有相同的高度(例如 3 列布局)，使用 100% 宽度
  • 响应能力 : 调整浏览器窗口大小时自动适应
  • 移动设备 : 显示垫和手机的替代装配布局
  • 文字大小 : 可选择动态调整文本大小(例如全 Angular 标题)
  • 图片大小 : 可选择动态调整图片尺寸(例如全宽图片库)
  • 断点 : 可选定义触发改变布局的事件的宽度值(例如，如果宽度低于阈值，则删除按钮)

    • 更新

    我发现了许多网格，但将其缩小到以下三个可能非常适合我的要求的有前途的框架:
  • Foundation
  • Semantic Grid
  • Golden Grid System

    • 以下是所有其他内容:
  • CSS Grid (非流体)
  • 320 and Up (非流体)
  • Columnal (非流体)
  • Skeleton (非流体)
  • SimpleGrid (非流体)
  • Less Framework (非流体)
  • Bootstrap (非语义类)
  • Breakpoints.js (只有断点，和媒体查询太相似了)
  • Adaptive images (仅图片)
  • FitText (仅文本)
  • Gridset (商业)
  • HTML5 Boilerplate (旧)

    • 通常，我会在问这里之前自己测试它们，以便我可以提出更具体的问题。但是由于大量的框架，我想听听一些从哪里开始的指示。
  • 您对这些或其他类似框架的体验如何？
  • 你推荐一个符合我要求的特定框架吗？

    • 解决方案

    我最终使用了 Foundation 这显然是这场比赛的赢家——以我的拙见。

    更新 2

    Bootstrap 3现在是真正的竞争，因为它也支持语义网格类。它支持 SASS 和 LESS。

    最佳答案

    我之前使用过 columnal，它确实提供了除了断点功能之外您想要的大部分功能。
    它易于使用且具有自适应性。在移动屏幕中，网格降级为堆栈，因此所有列内容都显示在另一个之下。
    然而，对于智能适应功能，正如您在断点功能中所概述的那样:我强烈建议您直接使用 CSS 3 媒体查询，因为这正是它们的用途，而且它们并不难使用。在表格下提供这些功能的 CSS 框架仅使用媒体查询。

    看看http://twitter.github.com/bootstrap/scaffolding.html#responsive ，Bootstrap 的流体网格确实提供了一些方便的快捷方式，用于为特定的屏幕尺寸设置 css 属性，这些在列中不存在。

    关于javascript - 响应式网格布局框架，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10741934/

    javascript响应strongnoreferrernoopenercssresponsive-designgrid-layout

    有关javascript - 响应式网格布局框架的更多相关文章

    1. ruby-on-rails - 每次我尝试部署时，我都会得到 - (gcloud.preview.app.deploy) 错误响应 : [4] DEADLINE_EXCEEDED - 2

      我是Google云的新手，我正在尝试对其进行首次部署。我的第一个部署是RubyonRails项目。我基本上是在关注thisguideinthegoogleclouddocumentation.唯一的区别是我使用的是我自己的项目，而不是他们提供的“helloworld”项目。这是我的app.yaml文件runtime:customvm:trueentrypoint:bundleexecrackup-p8080-Eproductionconfig.ruresources:cpu:0.5memory_gb:1.3disk_size_gb:10当我转到我的项目目录并运行gcloudprevie

    2. ruby - nanoc 和多种布局 - 2

      是否可以为特定(或所有)项目使用多个布局？例如，我有几个项目，我想对其应用两种不同的布局。一个是绿色的，一个是蓝色的(但是)。我想将它们编译到我的输出目录中的两个不同文件夹中(例如v1和v2)。我一直在玩弄规则和编译block，但我不知道这是怎么回事。因为，每个项目在编译过程中只编译一次，我不能告诉nanoc第一次用layout1编译，第二次用layout2编译。我试过这样的东西，但它导致输出文件损坏。compile'*'doifitem.binary?#don’tfilterbinaryitemselsefilter:erblayout'layout1'layout'layout2'

    3. TimeSformer：抛弃CNN的Transformer视频理解框架 - 2

      Transformers开始在视频识别领域的“猪突猛进”，各种改进和魔改层出不穷。由此作者将开启VideoTransformer系列的讲解，本篇主要介绍了FBAI团队的TimeSformer，这也是第一篇使用纯Transformer结构在视频识别上的文章。如果觉得有用，就请点赞、收藏、关注！paper:https://arxiv.org/abs/2102.05095code(offical):https://github.com/facebookresearch/TimeSformeraccept:ICML2021author:FacebookAI一、前言Transformers(VIT)在图

    4. ruby-on-rails - 在 Ruby on Rails 中发送响应之前如何等待多个异步操作完成？ - 2

      在我做的一些网络开发中，我有多个操作开始，比如对外部API的GET请求，我希望它们同时开始，因为一个不依赖另一个的结果。我希望事情能够在后台运行。我找到了concurrent-rubylibrary这似乎运作良好。通过将其混合到您创建的类中，该类的方法具有在后台线程上运行的异步版本。这导致我编写如下代码，其中FirstAsyncWorker和SecondAsyncWorker是我编写的类，我在其中混合了Concurrent::Async模块，并编写了一个名为“work”的方法来发送HTTP请求:defindexop1_result=FirstAsyncWorker.new.async.

    5. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

      我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

    6. ruby - sinatra 框架的 MVC 模式 - 2

      我想开始使用“Sinatra”框架进行编码，但我找不到该框架的“MVC”模式。是“MVC-Sinatra”模式或框架吗？ 最佳答案 您可能想查看Padrino这是一个围绕Sinatra构建的框架，可为您的项目提供更“类似Rails”的感觉，但没有那么多隐藏的魔法。这是使用Sinatra可以做什么的一个很好的例子。虽然如果您需要开始使用这很好，但我个人建议您将它用作学习工具，以对您来说最有意义的方式使用Sinatra构建您自己的应用程序。写一些测试/期望，写一些代码，通过测试-重复:)至于ORM，你还应该结帐Sequel其中(imho

    7. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

      我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

    8. ruby-on-rails - 你能为 Ruby on Rails 推荐好的数据网格类/gem 吗？ - 2

      您能为RubyonRails推荐好的数据网格类/gem吗？喜欢http://code.google.com/p/zend-framework-datagrid/采埃孚 最佳答案 你也可以试试datagridgem。这不仅关注带有列的网格，还关注过滤器。classSimpleReportincludeDatagridscopedoUser.includes(:group)endfilter(:category,:enum,:select=>["first","second"])filter(:disabled,:eboolean)fi

    9. ruby-on-rails - 正确了解 Rails 框架的最佳方式是什么？ - 2

      按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visitthehelpcenter指导。关闭10年前。我一直在Rails上做两个项目，它们运行良好，但在这个过程中重新发明了轮子，自来水(和热水)和止痛药，正如我随后了解到的那样，这些已经存在于框架中。那么基本上，正确了解框架中所有智能部分的最佳方法是什么，这将节省时间而不是自己构建已经实现的功能？从第1页开始阅读文档？是否有公开所有内容的特定示例应用程序？一个特定的开源项目？所有的rails交通？还是完全

    10. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

      我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

    随机推荐