Question

我正在使用CSS Grid在大屏幕上制作与图片混合的文字。我希望他们在手机上形成专栏。基本上桌面上有3列，移动设备上有1列。如何使用媒体查询实现它？我正在考虑在@RunWith(PowerMockRunner.class) @PrepareForTest({DigestUtils.class}) public class TestTest { private RequestUtil sut = new RequestUtil(); @Test public void testGenerateCode() { PowerMockito.mockStatic(DigestUtils.class); byte[] input = "anInput".getBytes(); final String hex = "0beec7"; Mockito.when(DigestUtils.sha1Hex(input)).thenReturn(hex); String actual = sut.generateCode(input); Assert.assertEquals(hex.toUpperCase(), actual); } }下找到要禁用网格的命令，但是甚至不知道是否存在这样的事情。

768px

.history {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 1em;
  grid-row-gap: 100px;
}

.box1 {
  grid-column: 1/3;
}

.box2 {
  grid-column: 3;
  justify-self: center;
}

.box3 {
  grid-column: 1;
  justify-self: center;
}

.box4 {
  grid-column: 2/4;
}

.box5 {
  grid-column: 1/3;
}

.box6 {
  grid-column: 3;
  justify-self: center;
}

.box7 {
  grid-column: 1/4;
}

Answer 1

＆＃13;

max-width

＆＃13;

只需在页面中添加要在移动设备上显示的元素的CSS属性即可。 768px表示任何设备的屏幕尺寸，小于grid-template-columns: 1fr;将显示此CSS样式覆盖默认样式。

制作@media将使用设备屏幕的全宽，这是您的要求。

请注意：仅在默认CSS样式之后放置<textarea name={this.props.name} id={this.props.id} onChange={this.props.onChange} value={this.props.value} ref="someref" >个查询。

Answer 2

我知道您在上面还有另外两个答案，您选择了其中一个作为首选-但最简单，最优雅的解决方案将为您省去必须重置所有框的麻烦，就是将.history声明为小型设备媒体查询中的一个块。这就对了。换一行。

@media only screen and (max-width: 768px) {
    .history {
       display: block;
    }
}

我在上面的代码段中对其进行了测试，只是更改了“ display：grid;” “显示：阻止；”所有块元素都将堆叠在一起，从而使浏览器能够像往常一样运行。

如果还有其他问题，请打我。

Answer 3

添加应触发更改的屏幕的媒体查询宽度并添加.history { grid-template-columns：1fr; }

如果看起来不好看，请调整css。

如何在具有媒体查询的移动设备上将3列CSS网格更改为1列

3 个答案: