没有媒体查询的CSS网格？
没有媒体查询的CSS网格是指在CSS中使用网格布局(Grid Layout)来创建响应式网页布局，而不依赖于媒体查询(Media Queries)来适应不同的屏幕尺寸和设备。
网格布局是一种强大的CSS布局模块，它允许开发者将页面划分为行和列，以创建灵活的网格结构。通过定义网格容器和网格项，可以轻松地实现复杂的布局。
没有媒体查询的CSS网格的优势在于简化了响应式设计的实现。传统的响应式设计通常使用媒体查询来根据不同的屏幕尺寸应用不同的样式规则，但这种方法需要编写大量的媒体查询代码，并且难以维护。而使用网格布局，可以通过定义网格容器和网格项的大小和位置，使页面自动适应不同的屏幕尺寸，从而简化了响应式设计的过程。
没有媒体查询的CSS网格适用于各种应用场景，特别是需要创建复杂布局的网页。它可以用于构建响应式的网站、应用程序的用户界面(UI)，以及移动端和桌面端的界面设计等。
腾讯云提供了一系列与网页开发相关的产品和服务，其中包括云服务器、云存储、云数据库等。这些产品可以与网格布局结合使用，以实现高性能的网页应用。具体的产品介绍和链接地址如下：
- 云服务器（ECS）：提供可扩展的计算资源，用于部署和运行网页应用。了解更多：腾讯云云服务器
- 云存储（COS）：提供安全可靠的对象存储服务，用于存储网页中的静态资源，如图片、样式表和脚本文件等。了解更多：腾讯云云存储
- 云数据库（CDB）：提供高性能、可扩展的数据库服务，用于存储和管理网页应用的数据。了解更多：腾讯云云数据库
通过结合网格布局和腾讯云的相关产品，开发者可以构建出高效、可靠的响应式网页应用。
相关·内容
1回答
在我的react项目中，使用react引导程序，它将加载所有网格大小的css，但xs集除外。
然而，xs集确实获得了应用于所有网格大小的默认样式，但不包括媒体查询。
有什么明显的东西我错过了吗？
自举4
浏览 7提问于2017-05-03得票数 8
回答已采纳
3回答
这可能是因为我没有掌握css网格，但我正在尝试这两个布局，一个用于移动和一个用于桌面。我曾尝试使用媒体查询来创建两个不同的网格，但桌面上的网格最终搞乱了(假设已经有一个网格)我已经附加了下面的两个布局，使用网格不是更好吗？
浏览 3提问于2020-08-25得票数 0
你好，我正在做一个网站插件，我有一些问题，使用css网格显示这些帖子。这是一个使用媒体查询更改网格模板列的简单方法。检查人员说，我的媒体查询是活动的，但模板列中的实际更改没有呈现。
这是网址url：
下面是css：
.post_holder {
max-width: 100% !important;
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 56px 24px;
margin: 24px;
}
@media only screen and (max-width
浏览 3提问于2021-01-26得票数 0
回答已采纳
1回答
将网站转换为CSS网格。我有3个媒体查询3个屏幕大小。我想优化我的代码以提高速度。 所有查询的位置是高还是低会影响第一次绘制的时间？ 媒体查询的顺序是否会影响移动用户看到内容的时间？ 我使用内联关键路径工具来内联页眉中的关键路径css，以便页面可以在所有内容加载之前进行绘制。所有媒体查询都显示在此关键路径css中。因此，我认为这意味着第一个油漆将是第一个适合屏幕大小的油漆。这告诉我，就速度而言，顺序并不重要。 不管顺序如何，我的代码都显示得很好。所以不用担心这类问题。
浏览 6提问于2019-04-25得票数 0
回答已采纳
2回答
我试图弄清楚如何使用较少的框架来构建2-3列网格，但是如何开始呢？
在CSS代码中，它说：
13-列布局60 px列，24 px排水沟，72 px边距，1212 px总计(额外的滚动条空间)
在上，它说8科尔的老浏览器和13的桌面.我是否在@media only屏幕中添加了列网格，并(最小宽度:1212 do )媒体查询(或将其添加到不同的css文件中)。
我试过找一些例子，但还没有找到有价值的东西。
更新：
在阅读了大卫·奥利弗的答案后，我将试着回答以下问题：
320: 1
480: 1
768: 2
1280: 3
我希望这能回答这个问题。
浏览 6提问于2010-11-21得票数 3
回答已采纳
我想为支持“显示:网格”但不是IE/MS Edge的浏览器提供一部分CSS。如何混合积极和消极的@支持查询？
你能写‘和不’，或者有类似的符号吗？不幸的是，以下内容将无法奏效。
@supports not (-ms-ime-align:auto) and (display: grid) {
display: none;
}
浏览 2提问于2017-02-09得票数 4
回答已采纳
我正在进入网页开发，并有一个有点麻烦的CSS。我更像一个C++/PHP的家伙，所以这对我来说是一个不同的世界，它困扰着我的头脑。CSS的唯一问题是定位对象。这就是我唯一的问题。我可以很容易地引用复杂的选择器，并且查找如何操作某些attributes....but定位会让我死而复生。
这不是一个问题，而是对一个知道自己在做什么的人的呼唤。我完全爱上了响应性网页设计的概念。然而，我从来没有亲自参与过这件事(我使用wordpress和响应主题来处理视觉效果-当我编写我需要的内容和插件时)。在响应性的网页设计中到底涉及到什么？我经常听说网格系统，这在我的脑海中是有意义的。网格系统会使页面布局发生变化吗
浏览 3提问于2015-03-21得票数 0
回答已采纳
1回答
我做了一个网格布局，由3列宽，3行高组成：
.home-works {
padding: 30px;
font-size: 1.2rem;
display: grid;
grid-template-columns: 2fr 2fr 2fr;
grid-template-rows: 2fr 4fr 4fr;
grid-gap: 10px;
}
这给我的桌面视图带来了零问题，但我现在需要跟进的是，当视图端口中断时，目前我正在使用max-width:768px规则。所以，现在，一旦视区的宽度达到这个最大宽度，任何CSS Grid命令似乎都不会有任何
浏览 1提问于2019-10-10得票数 0
1回答
我正在尝试使用媒体查询和CSS网格创建一个响应性的网格部分。网格在全宽度上看起来很好，但是一旦999 of和750 of媒体查询启动，我就开始遇到一个奇怪的问题，在网格的右边和底部都有额外的CSS网格槽。
.categories-grid > .website-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-template-areas:
"nails nails offers offers"
浏览 6提问于2022-06-10得票数 1
1回答
在CSS网格中选择列
、、、
我正在寻找一种在CSS网格中选择列的方法。我找到了一种在静态网格中使用:nth-child()选择器选择列的方法。例如:在3列网格中，:nth-child(2)将选择第二列中的每个网格项。
但是，当你像我一样有一个有三个媒体查询的响应网格时，这是行不通的。我的网格有24个网格项。在移动设备上，内容显示在3列8行网格中。在平板电脑上，它被显示在一个4乘6的网格中，等等。例如，我需要一种选择第三列的方法，不管是8行还是6行。
这是一个很难解释的问题，如果我需要进一步澄清的话，请告诉我。我想不出用CSS解决方案的可能性，所以它可能是JavaScript或jQuery解决方案。下面是我的CodePen
浏览 1提问于2017-11-10得票数 0
回答已采纳
2回答
我正在进行一个基于网格容器的挑战，这个网格包含3张卡片，它们被水平显示。
问题
我有一个名为.格栅容器的类，它具有以下CSS属性：
display: grid;
grid-template-columns: repeat(3, 1fr);
所以在我的媒体查询中，我这样做了：
@media only screen and (min-width: 320px) and (max-width: 900px) {
.grid-container {
display: flex;
flex-direction: column;
}
}
正如您所看到的，我将网格更改为具有列方向
浏览 11提问于2022-08-06得票数 0
回答已采纳
我使用Zen Grid进行响应式布局已经有一段时间了，但不知何故从来没有遇到过这个问题。我引用了，但我一直想不出该如何做一些相对简单的事情。
我在网格上设置了一个块，例如：
<div class="container">
<div class="item">
</div>
</div>
==========
.container {
@include zen-grid-container();
}
.item {
@include zen-grid-item(1, 1);
}
然后我有一个
浏览 2提问于2013-05-20得票数 0
如果需要，我使用html中的媒体查询加载网格的新样式表。我能把这个翻译成在我的functions.php中工作吗？
wp_register_style('html5blank', get_template_directory_uri() . '/style.css', array(), '1.0', 'all');
wp_enqueue_style('html5blank'); // Enqueue it!
<link rel="stylesheet" href="<?php
浏览 3提问于2013-10-11得票数 2
回答已采纳
1回答
我想出了一个响应性强且流畅的缩略图网格的解决方案，使用媒体查询：
<div class="container>
<div class="thumbnail">
<img src="https://placekitten.com/g/250/250" alt="..." />
</div>
<div class="thumbnail">
<img src="https://placekitten.com/g/250/250
浏览 6提问于2014-12-04得票数 0
通过使用CSS3媒体查询，“我的网站”的网格布局将相对于“浏览器”视口的宽度进行更改。
但现在我正在寻找一种方法来改变我网格中特定块的布局。因此，它们的行为与其父元素的宽度不同。
例如，如果父元素的宽度为+500px，我可以显示带有缩略图的标题，如果父元素的宽度小于500px，则仅以较大的字体大小显示标题。
如果可能的话，最好的方法是什么？最好不使用JavaScript。
这种方法应该允许我编写一个HTML块，可以在任何站点上、页面上的任何位置重用，无论是否具有响应式布局。
浏览 0提问于2011-12-01得票数 2
我正在尝试使用css网格创建一个简单的布局(我认为)，但是我找不到如何实现它。
基本上，我想有一个图像和文字并排。当包含网格的宽度太小时，文本将位于图像下方，并且都会获得100%的宽度。
使用grid-template-columns: repeat(autofit, minmax(300px, 1fr))：很容易做到这一点
问题是，当图像和文本并排时，我希望文本是文本的两倍大。我可以用grid-template-columns: minmax(200px, 1fr) minmax(400px, 2fr)实现这一点，但是文本永远不会低于图像，并且会溢出。
我想，如果我对文本元素使用grid-t
浏览 0提问于2018-08-02得票数 7
1回答
我正在使用的api进行一个Ionic项目。
正如你从图片中看到的，我有一个海报封面的网格。在iPhone 5(用css对其进行调整)和iPhone 6 6Plus上，您可以看到网格位于中心。但在iPhone 6上，这有点离谱。
它试图用媒体查询来解决这个问题，但是如果我做了一个更改，那么iPhone 5& iPhone 6Plus的网格也会发生变化。
我的问题是如何调整iPhone 6的布局，而不影响iPhone 5& iPhone 6 6Plus的布局。
HTML代码的一部分：
<div class="row responsive-sm responsive-m
浏览 0提问于2015-11-09得票数 3
回答已采纳
2回答
我通过指南针框架和蓝图/网格依赖来使用saas。我希望能够使用媒体查询来设置列的宽度，如下所示：
// /src/partials/_base.scss
$blueprint-grid-columns: 18;
@media screen and (max-width: 1024px){
// If screen res is 1024 or lower, then set grid width to 46px
$blueprint-grid-width: 46px;
}
@media screen and (max-width: 1280px){
$blueprin
浏览 3提问于2011-03-15得票数 7
回答已采纳
3回答
我有一个移动网站，风格与广泛使用的CSS3媒体查询。
我想为不支持媒体查询的浏览器添加一个额外的css文件，该文件覆盖了一些css规则。
我想知道是否有一种在火狐(21.0)中禁用媒体查询支持的方法，以便能够进行开发，因为我没有任何其他可以测试的东西。
Chrome解决方案也能解决，尽管我更喜欢使用firebug。
浏览 3提问于2013-06-06得票数 1
回答已采纳
2回答
媒体查询和引导
、、、、
我是前端开发的新手，最近遇到了媒体查询和它们是如何工作的。我在媒体查询之前学习了bootstrap，现在我想知道媒体查询是必要的吗？我觉得Bootstrap做了同样的事情，当你创建网格，并提到列类名称，即col 2-sm xs，lg等，并提供了响应式的感觉。有没有人能指点一下，什么时候必须用？
浏览 6提问于2021-05-22得票数 0
我在一个网格中建立了一个投资组合页面。在正常大小的监视器和大多数移动设备上，响应性很好。在某些移动设备(Nexus6P，即)上，响应能力会中断，内容堆叠的大小会越来越小，比如俄罗斯娃娃。
编辑:经过大量的疑难解答和阅读其他问题，我认为这是与最初的设计师设置响应与em和px视口大小有关。这是正常的吗？我在下面添加了一个链接到屏幕截图和css文件，因为有很多不同的媒体查询会影响到这一点。
编辑:它只发生在一个非常小的窗口，似乎是40.063em和~<640px范围媒体查询重叠的地方。而且，在模拟器中进行复制也很困难，因为如果我先打开一个较小的视口，然后打开Nexus6P大小(或者宽度为641
浏览 1提问于2017-08-02得票数 0
1回答
我是第一次在一个网站上手工编码(主要是一个印刷设计师)。我试图只使用HTML和CSS，因为我还没有时间深入研究任何Javascript，我真的很想了解我正在使用什么。因此，我的主要内容被设置在一个图像网格中，所有图像的大小都相同，3列宽。
我想在不同浏览器/设备大小的响应式设计中使用媒体查询。据我所知，您可以为相同的HTML布局创建不同的CSS文件，这些文件根据设备/浏览器的大小加载。
与现在一样，网格中的每个图像都作为标签设置在div中。然后，我使用CSS来定义具有background属性的图像。
<div id="main-content">
<d
浏览 1提问于2013-04-26得票数 0
所以，我使用的是。这是一个响应式的css网格设计，我对它印象非常深刻。然而(它什么时候结束？？)，IE (7，8)搞砸了。作者使用CSS3媒体查询将样式设置为低于768px。他还使用在不受支持的浏览器中启用媒体查询。但是这些样式在IE中是不会被应用的(虽然IE9可以很好的工作)。
我已经接受了一个相当丑陋的方法来解决这个问题(当屏幕尺寸低于768px时，读取特定的js文件来创建样式元素)。还有别的路吗？
浏览 0提问于2012-04-14得票数 0
回答已采纳
2回答
我真的不能再想别的了，这让我很困扰。
为什么boostrap.css中的网格对.col-sm-*, .col-md-*等有不同的媒体查询，而内部的flex: ;和max-width: ;对所有这些网格都是相同的？！
为什么他们不使用“通配符选择器”，并将其定义一次？
就像这样：
[class*="col-1-"] { flex: 0 0 8.333333%; max-width: 8.333333%; }
[class*="col-2-"] { flex: 0 0 16.666667%; max-width: 16.666667%; }
而不是
.col-sm-
浏览 0提问于2017-09-02得票数 0
回答已采纳
2回答
附加引导响应大小
、、
Bootstrap为CSS文件提供媒体查询，以支持一组设备，并以1200px的最小宽度结束，该文件使用1170px宽的网格。问题是，在这个特殊的情况下，有问题的网站需要一个至少1400px的额外断点，然后在其中有一个网格(比如1370px)。
我试着处理这些数字，并一直在寻找一种可以简化这一过程的生成器，但我找不到。我找到了一个响应式网格生成器，但我不知道应该放入什么值，因为它不是一个围绕Bootstrap的生成器。
总而言之，我不太确定如何继续做这件事，我希望能提供一些意见！
谢谢!
浏览 2提问于2012-10-11得票数 1
2回答
我在研究CSS媒体查询最佳实践，并找到了。
如您所见，第一个媒体查询没有min/max大小定义：
@media只显示屏幕{} /*定义移动样式*/
为什么他们使用这个媒体查询，因为它没有定义断点？这是一种最佳做法还是应该避免？
谢谢!
浏览 3提问于2016-10-01得票数 2
回答已采纳
我已经用Bootstrap做了一个网站，并使用了它的网格系统和CSS媒体查询，它是响应的，但我必须根据媒体查询中的最小宽度来设置字体大小，这使得它在达到相同媒体查询的最大宽度时变得更小。如何调整字体大小，使其适合该媒体查询中的所有屏幕大小？我是否需要为所有情况编写单独的媒体查询？Bootstrap Carousel也是如此。
我想在所有尺寸上实现相似的外观，这是可能的吗？
浏览 2提问于2018-10-24得票数 0
1回答
没有JS或媒体查询的(我知道)，是否有可能有一组条目要么在1列中，要么只有1行，“响应”？因此，如果没有足够的空间来容纳一行中的所有子列，则会将它们转换为1列。
我的想法是，这是不可能的，但想让更多的观众看到:)我尝试过摆弄css专栏、柔性盒和旧的忠实显示:内联块和浮动。我没有看一看css网格布局是否能做到这一点。
所以这就是
item1 item2 item3
或者这个
item1
item2
item3
但从来没有这样
item1 item2
item3
浏览 1提问于2016-09-08得票数 1
回答已采纳
4回答
IE11忽略我的媒体查询，总是使用移动css。
奇怪的是，如果我改变浏览器的宽度，即使只有1-2个像素，浏览器也会呈现自己，并显示媒体查询。
我尝试过css lint，但我的css中没有错误。
我的css没有什么特别之处。就像这样的简单的css：
.div_example{
width: 100px;
}
@media (min-width: 768px){
.div_example{
width: 300px;
}
}
有没有人遇到过这个问题？
浏览 1提问于2017-01-09得票数 2
编辑
我正在寻找一个没有javascript和没有媒体查询的解决方案(用户可以更改容器大小)。
/EDIT
我需要创建一个项目网格。
容器有一个灵活的宽度。
网格始终是居中的。
网格中的项需要保持对齐。
很简单，但我找不到解决办法!！
下面是一张我需要的图片：
下面是一个小摆设：
HTML：
<div class="container">
<div class="grid">
<a href="#"></a>
<a h
浏览 3提问于2014-08-19得票数 3
回答已采纳
1回答
我看到了chrome网上商店，想知道他们是如何创建这样的css布局的。我的意思是如何创建布局与固定大小像素左面板和灵活的流动布局，当你重新调整大小的浏览器。网格css框架可以归档相同的结果吗？
谢谢。
浏览 0提问于2012-04-27得票数 2
3回答
我第一次尝试媒体查询，但我找不到哪里出错了。我有下面的代码，我假设这是一个语法错误。当我尝试运行它时，什么也没有发生！感谢您的帮助，谢谢！
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 1024px)" href="styles/mobile.css" />
styles/mobile.css
.color {
height:100%;
}
.anim {
hei
浏览 0提问于2013-12-04得票数 0
1回答
媒体查询什么都不做
、、、
我已经用SASS做了一段时间的HTML和CSS，直到今天我的所有响应都在工作，我的css媒体查询突然停止了反应。
它们在被加载到网页上的css文件中，但是没有任何元素对它们作出反应.我无法将3k行的完整css文件复制到这里。
但我想我错过了一些基本的东西。我使用的是gulp，它在处理css时没有报告错误。
我要疯了，我想不出问题来了。直到今天，所有的事情都在进行，我需要在周一之前完成一个项目，而我无法做出回应。
所有的查询都正常。今天我没有做任何改变，当我运行这个项目时，查询不会做任何事情。
对可能的情况有什么建议吗？谢谢你们。
浏览 1提问于2015-03-04得票数 2
回答已采纳
1回答
我没有依赖媒体查询，而是尝试使用css网格创建一个响应组件，以便它能够在不同的布局中利用可用的空间。如果空间足够大，应该有两列，第一列是固定宽度(包含图像)，第二列是剩余部分(带有文本)，即2x1网格。如果不是，那么应该有一列占用所有可用空间，网格更改为1x2。
Wide 2x1网格
+---+---------+
| o | text |
+---+---------+
窄1x2网格
+---------+
| o |
+---------+
| text |
+---------+
我看过使用多列维度的repeat(auto-fill, ...)，但是它重复了2列模
浏览 0提问于2018-03-21得票数 10
回答已采纳
1回答
我正在尝试将我的项目更改为独占的样式组件使用。我有类似这样的东西 <div className={isGrid ? "card-grid" : "card-list"}> 我的div根据一个条件获取卡片网格或卡片列表className。如何在有样式的组件和没有css文件的情况下实现这一点？此外，我需要的媒体总是卡网格低于600px (@ className )
浏览 23提问于2020-01-31得票数 0
1回答
我试图使用@import样式的媒体查询来包含特定于浏览器的CSS，如下所示：
<style type="text/css">@import url(foo.css) all and (-moz-box-sizing: content-box);</style>
然后，foo.css有：
.myStyle { -moz-box-sizing: border-box; }
我的想法是，我将包括foo.css的火狐(壁虎/Mozilla)浏览器。然而，看起来foo.css从未应用于火狐。所以：
如何在Firefox中调试?为什么@import媒体查询没有计
浏览 1提问于2013-01-12得票数 0
回答已采纳
1回答
我正在制作一个js/jquery调试工具，供个人使用。我发现微调我的css媒体屏幕查询很痛苦。因此，我想出了一个主意，在窗口调整大小时显示触发的媒体css规则。因此，我需要知道，当css媒体屏幕规则生效时，是否有可能捕捉到事件。
注意:我可以轻松地读取我的css文件，并将它们放入一个变量中，过滤掉所有媒体查询，并将屏幕值与当前窗口大小进行比较。这将工作，但感觉没有效率，因为所有的css文件(和样式标签)需要处理。还有其他选择吗？
浏览 1提问于2013-10-13得票数 5
回答已采纳
1回答
我有一个视图，它显示带有文本和图像的内容类型(1列网格)。现在，图像定位在文本下面。有可能将图像定位到右边吗？
如果不使用自定义css，这是可能的吗？或者如果不是，我应该寻找哪个css文件？(还没有定制css )
浏览 0提问于2013-12-14得票数 0
2回答
我想向打印页面的人(media=print)和在手机上浏览的人显示相同的CSS样式集。有没有一种方法可以组合CSS媒体查询？
就像这样
@media only print or @media only screen and (max-device-width: 480px) {
#container {
width: 480px;
}
}
浏览 0提问于2012-01-25得票数 49
回答已采纳
3回答
我知道有两种方法可以添加媒体查询：
HTML链接：
<LINK REL="stylesheet" TYPE="text/css" MEDIA="(max-width: 1024px)" HREF="foo.css">
CSS:
@media all and (max-width: 1024px) {
......
}
我已经阅读了这些文档，并且理解了这两种方法之间的明显区别。不过，以下是我怀疑你能否澄清的两个问题：
浏览器是否处理HTML媒体链接与CSS媒体查询不同？我的意思是，我知道如果css中添加了cs
浏览 5提问于2014-09-07得票数 14
回答已采纳
1回答
我试图在我的网格站点中支持IE11，并且在一个媒体查询中有-ms-网格代码。我想激活-ms-网格仅在大于767 to的屏幕上。
这样做是可行的：
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active){
我将在IE11中获得-ms-网格代码，并且只使用IE11，但这是行不通的：
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active), (min-width:767px){
当我调整屏幕尺寸时它不会关闭。我试过几种不同的方法，我是
浏览 2提问于2018-02-01得票数 0
回答已采纳
1回答
我一直在尝试为我正在构建的Joomla 3模板(从Protostar模板复制)编写一些媒体查询，但不幸的是，我没有太多成功。
我一直在尝试更改我在普通桌面上显示的背景颜色，然后我有了以下媒体查询：
#sidebar {
background:#fabe04;
}
// Landscape phones and down
@media(max-width:480px) {
#sidebar {
background:#FFF;
}
}
但由于某些原因，我在刷新时忽略了这一点，并且即使我调整了浏览器窗口的大小，也没有任何变化。
我目前的设置是，我已经创
浏览 2提问于2015-10-18得票数 0
1回答
这个问题已经在多个论坛上得到了回答。
我有固定的网格布局问题，通过添加col类，它工作得很好。我现在面临的问题是背景色。
正如许多答案和论坛所建议的，我已经在bootstrap.css文件中对整个打印媒体查询进行了评论。
@media print { }
但在印刷时，颜色仍然没有显示出来。HTML代码如下所示。
第1期：
<div class="alert alert-success" role="alert">Automation Tester</div>
上面的代码为浏览器中的div类添加了颜色。但在印刷上，它只显示了边界。
第2期：
浏览 3提问于2015-02-22得票数 0
这是一个简单的壮举清除列在瘦小的视口，但我需要技术来移动东西。我正在尝试协调两个截然不同的移动和桌面模拟。桌面模拟包含一个3列网格，它应该在移动视图中折叠成一个单列网格，然后隐藏一些元素并重排其他元素。
隐藏元素对于display: none来说是微不足道的。对我来说，最困难的部分是将元素从列中分离出来，并将它们到处移动，就像一样。通过Firebugging他们的布局，我发现你可以通过操纵浮动来颠覆源代码顺序，这可能会被重置，并通过移动视口中的媒体查询来清除元素。这是在折叠视图中使中间列(在3列网格中)位于其他2列内容下方的一种方法。
这就是纯CSS回流布局所能达到的程度吗？有没有其他我可以使
浏览 0提问于2012-05-02得票数 4
1回答
CSS媒体查询的正确方法
、、、、
这个问题不是关于什么是CSS媒体查询，而是更多关于它的正确用法的问题。
因此，我计划创建一些流畅的页面，这些页面在桌面/平板/移动平台上查看时会有细微的用户界面差异。
所以我的问题是；
对于1页，我是否应该为桌面/移动/平板电脑创建单独的CSS文件，然后使用
链接href="desktop.css“media=.”链接href="ipad.css“media=.”
或者使用单个/通用的CSS，并在其中包含媒体查询，如
Common.css
@媒体..。//桌面样式
@媒体..。//ipad样式
我的意思是，会有单独的CSS造成一些滞后，boz的多个http请
浏览 2提问于2011-09-18得票数 0
回答已采纳
我有一个div，它是一个css网格容器。当页面宽度低于某个特定大小时，我希望网格的所有元素都放在一条线上。我认为你应该能够将显示类型更改为flex box，我尝试过这样做，但网格保持不变。下面是我使用的代码：
请参阅上的the Pen by biltimi@gmail.com ()。
/* The important part of the CSS*/
@media (max-width: 40em) {
.image {
visibility:hidden;
}
.grid-container {
display: inlin
浏览 0提问于2018-03-22得票数 2
2回答
我用的是Next.js 9.53
我使用的基本随Next.js -没有CSS前处理器(less，sass等)也没有CSS (styled-components等)
目前，我首先编写我的CSS手机，然后有一大堆冗余的媒体查询，如下所示：
/* "desktop" */
@media screen and (min-width: 1024px) {
...
}
我在几个不同的模块中有媒体查询的冗余副本。我喜欢与定义默认样式的CSS相近的替代样式。但我不喜欢那个查询的“神奇数字”方面。
我也有一套“全局”的CSS，在这里我定义了一些高级的东西和一些CSS变量，然后我在所有的模块C
浏览 2提问于2020-09-05得票数 0
回答已采纳
说：
第一项破坏砌体布局
对于砖石布局模式，如果遇到重新调整第一项大小的问题，并且所有其他项都不再适合网格中，则很可能需要设置columnWidth选项。如果没有columnWidth设置，砌体布局模式将使用第一项的宽度作为其列的大小。
$('#container').isotope(
masonry: {
columnWidth: 220
}
});
这就是我目前正在做的事情。不过，我希望有一些CSS媒体查询，以改变columnWidth。因此，如果我的第一个同位素项目有正常的1x宽度，我可以指定CSS中项目的宽度，而同位素将从那里获取columnWidth并
浏览 0提问于2013-07-26得票数 3
回答已采纳
1回答
我有一个基础的块网格，这里面有大量的图片。
我想设置一个网格的最大高度，这样图像在一定的高度后就不会显示。我希望显示2行，然后隐藏其余行。
HTML：
<div class="row">
<div class="small-12 columns my-grid">
<ul class="small-block-grid-4 medium-block-grid-8 large-block-grid-9 text-center">
<li><div st
浏览 3提问于2014-11-24得票数 0
2回答
我目前正在努力获得一个CSS网格，以处理一些媒体查询更小的屏幕大小。实际上，我有一个有两行和三列的网格，它可以下降到3行，两列在较小的屏幕上。我希望这样下去，在电话大小的屏幕上有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: cent
浏览 3提问于2020-12-29得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
