我对网页设计与960.gs等CSS网格系统的响应速度有点混淆。

Nathan Smith(创作者或960.gs)前段时间提出了adapt.js,通过检查捆绑的样式表( mobile.css720.css960.css等等),很清楚网格的数量列不受影响,只有各列的宽度和它们堆叠在一起的方式发生变化。

另一方面, 978.gs似乎遵循不同的模式:

  • 300px网格有8列
  • 748px和978px网格都有12列
  • 1218px和1378px网格都有16列

起初,我虽然没有太大意义,所以我和开发人员讨论了这个问题。 他回答称,通常的做法是根据设备宽度提供不同的CSS 不同的标记

这种方法对我来说似乎有点奇怪,因为如果你愿意重写整个HTML标记,你也可以使用相同的网格系统(例如16个),只需将所有.grid_{x}类更改为.grid_{x*2}以容纳更小的屏幕......对吗?

adapt.js方法似乎更容易实现和管理,但我也可以发现一些警告:图像或文本片段如何在grid_3类中很好地适应? 因为它的宽度范围可以从2520.css变体中的auto220px到甚至610px

那么,关于响应式网页设计和网格系统的当前最佳实践是什么? CSS媒体查询是否会影响网格(列宽)? 事实上,我倾向于认为最好的方法可能是提供单个标记和样式表,让浏览器进行渲染/缩放。

我对此非常环保,所以感谢任何帮助 - 谢谢。

  ask by Alix Axel translate from so

本文未有回复,本站智能推荐:

1回复

Fluid 960网格系统中的CSS

960网格很棒,下载后,我注意到demo.html在最后包含了.push和.pull类的示例,如下所示: 主页在标题“ Custom CSS Generator”下提供了到流体网格系统的链接,该链接奇怪地跳过了上述测试(按“预览”以查看测试)。 我决定添加这样的测试,因为流体网格的CS
4回复

响应式网页设计媒体查询宽度不变

我正在努力使页面响应,通过根据大小更改div width ,但除了宽度我能够更改的每个属性, width根本没有变化。 我的HTML代码和样式元素 #main { width: 100%; display: flex; flex-wrap: wrap; } #main di
1回复

使用响应式网页设计和JavaScript设计面包屑

我想在页面中添加面包屑 ,并且希望通过调整窗口大小,更改分辨率和使代码独立于设备/目标来正确缩放视图。 我知道响应式网页设计是我必须要做的。 我已经阅读了几篇文档和教程,并了解使用媒体查询可以实现这一目标。 因此,在媒体查询中,我使用最小宽度,最大宽度来更改CSS。 我想要实现的
2回复

响应式网页设计应该使用哪种媒体类型?

我看到一些在媒体查询中使用“仅屏幕”,其他人使用“全部”,其他人使用“屏幕和打印”,其他人使用“屏幕”(没有“仅”),其他人没有指定媒体类型。 我不打算使用特定的CSS进行打印或其他媒体。 我应该使用“只有屏幕”。 我不应该指定媒体类型吗? 大多数人使用的媒体类型是什么?为什么?
2回复

为什么响应式网页设计在分辨率相同但ppi不同的屏幕上响应不同?

使用媒体查询时,您可以设置min-width属性并进行相应的设计,但是我正在同时使用台式机和手机进行测试。 我的手机分辨率为1080p,与台式机显示器相同,但是设计在两个屏幕上的响应都不同。 它的行为应该一样吗? 我想念什么? 如果我仅使用像素,为什么它们的行为会有所不同?
1回复

12列响应式设计-文章和格式不正确

我正在尝试为响应式网站创建模板。 我的第一个问题是,Article和Aside应该并排放置。 我使用带有行的12列系统,并且将Article和Aside都分配给div类“ col-6”,这意味着它们各自应占容器宽度的50%。 我不明白他们为什么要这样做: 文章和旁边应几乎在
1回复

响应式设计问题

我在响应式设计上遇到了一些麻烦。 我尝试创建的第一个。 由于某些原因,当我在iPhone上查看网站时,所有内容都会放大。 我想要的是 在桌面站点上,徽标将位于“ .container”的左侧,在iPhone上查看时,图像将直接位于中间。 这是URL: http : //ma
1回复

响应式设计

我正在为桌面版本和移动版本进行设计,但是我在这里停留在按钮的位置上,我为桌面版本的按钮ID“三个,四个,五个,六个,七个,八个”编写定位CSS,并编写另一个在“ @media only屏幕和(最大宽度:600像素){}”中为移动版本定位所有CSS,但问题是,当我打开桌面版本时,它将移动版本定位为
1回复

卡住-图像网格布局和媒体查询以进行响应式设计

我是第一次在网站上手工编码(主要是印刷设计师)。 我试图只使用HTML和CSS,因为我没有时间深入研究任何Javascript,我真的很想了解我在使用什么。 因此,我的主要内容设置在一个图像网格中,所有图像均相同大小,宽3列。 我想将媒体查询用于具有不同浏览器/设备尺寸的响应式设计。
2回复

响应式设计无法正常工作

我有一个任务要在给定页面上使用响应式设计,但是它不能正常工作,在案例下拉列表中它不支持该设计。 我的html页面是 我的ipad.css文件是 我的ipad1.css文件是