Question

如何建立两个屏幕宽度（375像素和1024像素）的网站？该网站无需响应两者之间的宽度。

@仅媒体屏幕和（最小宽度：375像素）和（最大宽度：1024像素）据我所知，这种标签媒体的工作范围是375至1024。也许使用断点是正确的方法。有什么建议吗？

Answer 1

总是最好设计CSS mobile-first，这意味着CSS文件看起来像这样：

CSS:
// Basic CSS
div {
  height: 200px;
  width: 200px;
  background-color: yellow;
}

@media screen and (min-width: 375px) {
  div {
    height: 150px;
  } 
}

@media screen and (min-width: 1024px) {
  div {
    height: 100px;
    background-color: red;
  }

这样，您将有一个div，可以在断点上以三种不同的方式呈现

0-374像素，是200x200像素的正方形，带有黄色背景
375像素-1023像素，这是一个150x200像素，黄色背景的矩形
1024像素及以上，是一个100x200像素的矩形，红色背景

这样，您就不会重复太多，代码会保持干净，并且只覆盖必要的内容。

Answer 2

我还将针对所有具有纵向模式的设备提供媒体查询。我也给媒体查询CSS使用断点。使用此媒体查询可以更好地使用它，并且肖像设备也包含在此答案中：

ma = df.rate.mask(df.rate.eq(0))
df['rate'] = ma.fillna(ma.groupby(df.TYPE).transform('mean').fillna(0))

   ID  TYPE  rate
0   1    A   2.0
1   2    B   2.0
2   3    C   1.0
3   4    A   2.0
4   5    C   1.0
5   6    C   3.0
6   7    C   8.0
7   8    C   2.0
8   9    D   0.0

两个屏幕宽度：375像素和1024像素

2 个答案: