Question

我尝试在@media标记中设置屏幕尺寸，但是页面中的包含仍然没有响应。除了引导程序外，我还能做些什么来使其响应？下面的代码是我添加到项目中的CSS代码。预先谢谢你。

@media screen and (max-width: 600px)  {
body{
position: absolute;
width: 411px;
height: 823px;
left: 0px;
top: 0px;

background: #00644C;

font-family:Inter;
}

}



.container {
  width: 309px;
  clear: both;
}

.container input {
  width: 100%;
  clear: both;
}


label {
color: #FFFFFF; 
  display: flex !important; 
  padding-left: 70px;
  padding-top: 10px;
  padding-bottom: 10px;
  font-weight: normal !important;
  

 
}
.btn.btn-block{

background: #FFFFFF;
border-radius: 2px;
}

input[type=submit] {
    width: 20em !important;
    height: 2em;
}

Answer 1

我相信这只是@media only screen and (min-width:600px)

的简单重新编码

我以前曾经遇到过，这对我有用。只是检查一下

Answer 2

尝试将此代码添加到html的head部分中。这为浏览器提供了有关如何控制页面尺寸和缩放比例的说明。

width=device-width部分将页面的宽度设置为跟随设备的屏幕宽度（视设备而定）。

initial-scale=1.0部分设置浏览器首次加载页面时的初始缩放级别。

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">

我应该如何使我的项目对CSS做出响应？

2 个答案: