如何写我的css代码给予不同大小的large，中型和小型设备？[关闭]

dwbf0jvd 于 2023-03-24 发布在其他

关注(0)|答案(1)|浏览(102)

已关闭。此问题需要超过focused。当前不接受答案。
**想要改进此问题吗？**更新此问题，使其仅关注editing this post的一个问题。

4小时前关门了。
Improve this question
我怎么能写一个css代码给予我不同的大小为不同的设备，为小尺寸的设备最小= 991 px和最大= 1199 px，为中等尺寸的设备最小= 1200 px和最大1600 px和为大设备最小= 1600 px和最大= 1999 px.通过使用@媒体查询方法？请帮助我
我会得到一个正确答案

css

来源：https://stackoverflow.com/questions/75831613/how-to-write-my-css-code-to-give-different-sizes-for-larege-medium-and-small-si

1条答案

按热度按时间

jecbmhm31#

请使用以下内容：

.example {

    background-color: red;

    @media (min-width: 1600px) {
    
        background-color: purple;
    
    }

}

对于这个例子，类为“example”的节点的默认颜色是红色。当屏幕宽度达到1.600px时，它将变为紫色。
这是最简单的语法，然后你可以通过指定媒体类型来使事情变得更复杂（更多信息请参见答案末尾的链接）。
一些旁注：
1.-我建议使用min-width，因为这将有助于您进行移动优先的设计。默认样式将用于最小的屏幕，以下媒体查询将适用于较大的屏幕。
2.-我建议通过学习和使用其他CSS属性来避免媒体查询，例如clamp，grid等，这些属性有助于用更少的代码创建响应式设计。
3.-我建议为断点创建全局变量，这样你就可以从一个统一的点更改每个媒体查询，同时避免设计和断点的不一致：

@media (min-width: var(--breakpoing-small)) {

    background-color: pink;

}

4.-在大多数情况下，我不会太担心为每个断点设置一个混合和一个最大值，但只会担心一个最小值会被一个更高的最小值覆盖，等等。我想我需要澄清这一点，因为你的问题似乎表明你需要为每个屏幕尺寸设置一个最小值和一个最大值。
有关更多信息，请检查此：

赞(0）回复(0）举报 2023-03-24

我来回答

如何写我的css代码给予不同大小的large，中型和小型设备？[关闭]

1条答案

相关问题

热门标签

最新问答