使用 CSS 网格布局在仪表板主页中实现多个组件
Achieve multiple components in a dashboard home page using CSS grid layout
我是 CSS 网格布局的新手。
我在尝试使用 css 网格实现以下目标时遇到的问题
- 无法实现响应式设计。 （不同屏幕尺寸比例的响应效果不佳。示例 4:3 或 16:9）
- 众所周知，在 Internet Explorer 中测试应用程序时，大多数事情都不顺利（这里我说的是 IE11）
（编辑：排除，直到 IE 支持 CSS 网格布局）
- 它是一个网络工具仪表板，在全屏视图下使用时，在任何情况下都不应出现滚动条。
- 限制使用第三方插件或 poly-fills。 （因为商业用途）
- 限制在 css 属性中使用负值。
（编辑：我知道可以使用媒体查询和其他 CSS 布局属性来实现。在这里，我试图用最少和更简洁的代码来实现这一点）。谢谢
- 当您使用相对单位时，它会根据您的屏幕尺寸调整大小。对于不同的布局，您仍然需要 media queries
- CSS-grid is not fully supported by IE11. That usually isn't a problem as you should use a mobile-first approach anyways and mobile websites usually don't look bad on desktop anyways
- 这里的网格布局没有什么特别之处。 （如果有的话，它使它更容易：媒体查询+绝对单位=魔法）要么使用媒体查询要么
overflow: hidden;
- 限制使用第三方插件或 poly-fills。 嗯，不是吗？我不明白你的意思
- 限制在 css 属性中使用负值。 再一次，不，你通常不是？这里有什么问题？
我是 CSS 网格布局的新手。
我在尝试使用 css 网格实现以下目标时遇到的问题
- 无法实现响应式设计。 （不同屏幕尺寸比例的响应效果不佳。示例 4:3 或 16:9）
- 众所周知，在 Internet Explorer 中测试应用程序时，大多数事情都不顺利（这里我说的是 IE11） （编辑：排除，直到 IE 支持 CSS 网格布局）
- 它是一个网络工具仪表板，在全屏视图下使用时，在任何情况下都不应出现滚动条。
- 限制使用第三方插件或 poly-fills。 （因为商业用途）
- 限制在 css 属性中使用负值。
（编辑：我知道可以使用媒体查询和其他 CSS 布局属性来实现。在这里，我试图用最少和更简洁的代码来实现这一点）。谢谢
- 当您使用相对单位时，它会根据您的屏幕尺寸调整大小。对于不同的布局，您仍然需要 media queries
- CSS-grid is not fully supported by IE11. That usually isn't a problem as you should use a mobile-first approach anyways and mobile websites usually don't look bad on desktop anyways
- 这里的网格布局没有什么特别之处。 （如果有的话，它使它更容易：媒体查询+绝对单位=魔法）要么使用媒体查询要么
overflow: hidden; - 限制使用第三方插件或 poly-fills。 嗯，不是吗？我不明白你的意思
- 限制在 css 属性中使用负值。 再一次，不，你通常不是？这里有什么问题？