Question

PS：我对CSS很新，我正在努力工作移动响应式用户界面，所以如果有什么傻话请饶恕我！

我有两个设备的宽度和宽度设置为360X640和375X667。我正在尝试使用@media为这些编写css，但无法使其正常工作。我设置的断点似乎无法正常工作。以下是我的代码

@media(max-width: 360px){
  .un-progress{
    height: 10px !important; 
    margin-top: -0.325em;
    margin-left: -2.75em;
    margin-right: 1.5em;
  }
  .finished_time{
    margin-left: 6.25em;
    margin-top: -0.8em
  }
  .left_time{
    margin-left: 22.0em;
    margin-top: -2.5em;
  }
}


@media (min-width: 361px) and (max-width: 375px){
  .un-progress{
    height: 10px !important; 
    margin-top: -0.325em;
    margin-left: -2.75em;
    margin-right: 1.5em;
  }
  .finished_time{
    margin-left: 6.25em;
    margin-top: -0.8em
  }
  .left_time{
    margin-left: 22.0em;
    margin-top: -2.5em;
  }
}
}

Answer 1

尝试使用以下css。

media only screen
  and (max-device-width: 360px){
      .un-progress{
           height: 10px !important; 
           margin-top: -0.325em;
           margin-left: -2.75em;
           margin-right: 1.5em;
      }
     .finished_time{
        margin-left: 6.25em;
        margin-top: -0.8em
      }
      .left_time{
        margin-left: 22.0em;
        margin-top: -2.5em;
      }
}


@media only screen
   and (min-device-width: 361px) 
   and (max-device-width: 375px){
     .un-progress{
        height: 10px !important; 
        margin-top: -0.325em;
        margin-left: -2.75em;
        margin-right: 1.5em;
     }
     .finished_time{
        margin-left: 6.25em;
        margin-top: -0.8em
     }
     .left_time{
        margin-left: 22.0em;
        margin-top: -2.5em;
     }
   }
 }

Answer 2

你可以使用＆＃34;所有＆＃34;对于这个主题。

required

Answer 3

在开发响应时，您应该事先了解一些事项。 DON＆＃39; T 对每个设备都有媒体查询。你结束了

对每个设备进行媒体查询。
代码的可维护性将非常困难，尤其是在缩放时
最终会出现大型CSS文件，这对页面性能不利。

响应式CSS的最佳方式是首先遵循移动设计模式，随着媒体查询变大，逐步进行更改。例如

import Button from './src/components/Button';

render() {
		return (
			<Button style={{borderColor: 'red'}}>
			</Button>
		);
	};

（将媒体查询min-widths更改为approriate）这将为您提供更清晰，更轻量级的CSS

如何为不同的屏幕宽度和高度设置断点

3 个答案: