当前位置: 首页 > 知识库问答 >
问题:

CSS网格和媒体查询[重复]

左丘恩
2023-03-14

我目前正在努力获得一个CSS网格来处理一些较小屏幕尺寸的媒体查询。我基本上有一个两行三列的网格,在较小的屏幕尺寸下,它可以向下延伸到三行两列。我想让它进入一个网格,在一个电话大小的屏幕上有6行和一个主列。以下是我目前的代码:

@media (max-width: 549px) {
 .projects-container {
  grid-template-columns: 200px;
  grid-template-rows: 200px 200px 200px 200px 200px 200px;
  justify-items: center;
  align-items: center;
}
.project-tile {
 justify-self: center;
 align-self: center;
}

}

这在很大程度上是可行的。然而,出于某种奇怪的原因,尽管我在上面做了一些粗制滥造的努力,但这些框并没有集中在较小的屏幕上。下面是完整的代码笔来说明我的问题:https://codepen.io/hudsontay/pen/WNGdwpw?editors=1100

具体问题在投资组合的“工作”部分。

共有2个答案

王楚青
2023-03-14

更改证明-项目证明-内容,因为证明-内容把填充空间,帮助对齐子项目的中心框。

你可以在这里找到CSS的区别——justify-*和align之间的区别-*

@media (max-width: 549px)
.projects-container {
    grid-template-columns: 200px;
    grid-template-rows: 200px 200px 200px 200px 200px 200px;
    /* justify-items: center; */
    justify-content: center;
    align-items: center;
}

我测试了你的代码,这是结果:

裴永年
2023-03-14

justify content:center规则设置为。项目容器。您不需要在媒体查询中指定此规则。

看看结果。

.projects-container {
    ...
    justify-content: center;
}
 类似资料:
  • 主要内容:1. 媒体类型,2. 媒体特性,3. 逻辑操作符,4. 定义媒体查询随着移动设备的快速普及,用户不再只是通过传统的电脑系来浏览 Web 内容,越来越多的用户开始使用各种尺寸的智能手机、平板电脑或者其它设备来浏览 Web 内容,为了确保使用不同设备的用户都能拥有不错的体验就需要用到媒体查询。 媒体查询是 CSS 样式表最重要的功能之一,所谓媒体查询指的就是根据不同的媒体类型(设备类型)和条件来区分各种设备(例如:电脑、手机、平板电脑、盲文设备等),并为它们分别定义不

  • 我想将此条件转换为CSS媒体查询: 编辑: 事实上,我想在这种情况下瞄准Ipad: 因此,如果是任何设备和当前宽度,则应应用CSS 谢谢

  • 问题内容: 是否可以定义一个最大列数的网格,但是当屏幕宽度改变时允许元素包装到新行上? 我有隐式类,允许行包装到新行上,但是没有最大列数。 这是使用弹性盒的一种方法的代码笔 CSS: 另一种方法是使用网格 我想要一个相当通用的解决方案,没有Java脚本或媒体查询,我想实现的目标是否可能? 问题答案: 使用flexbox,您可以简单地将a设置为容器,因为您的元素具有固定的宽度: 唯一的缺点是您需要知

  • 问题内容: iPhone 5的屏幕更长,无法捕捉到我网站的移动视图。iPhone 5新增了哪些响应式设计查询,可以与现有iPhone查询结合使用吗? 我当前的媒体查询是这样的: 问题答案: 另一个有用的媒体功能是。 请注意, iPhone 5没有16:9的宽高比 。实际上是40:71。 iPhone <5: iphone 5: iPhone 6: iPhone 6 Plus: iPad:

  • 问题内容: 我知道有两种添加媒体查询的方法: HTML链接: CSS: 我已经阅读了文档,并且了解了这两种方法之间的明显区别。但是,以下是我有两个疑问,请问您是否可以澄清: 1)浏览器对HTML Media Link的处理方式是否不同于CSS Media Query?我的意思是,我知道是否在CSS中添加CSS媒体查询,无论如何,所有CSS文件都会下载到所有设备,并且当浏览器解释编译后的CSS时,只

  • 在这本书中,我想要把主要精力都集中在讲解Sass的基础使用,和证明Sass并不会和你的工作流程脱节。但在最后一章中,我想讨论一些使用Sass结合媒体查询的高级技术和一些我每天工作中用到的将复杂CSS简化的例子。 只要你能想到的,Sass就可以办到。使用变量和一些mixin会让你的生活变得更轻松。如果你想的话,Sass完全不局限于这些简单的功能。下面这个例子再一次举重若轻的展示了Sass的建立兼容高