css 用于实验的响应式屏幕尺寸

uurity8g  于 2023-07-01  发布在  其他
关注(0)|答案(2)|浏览(131)

我希望我在这里提供了足够的细节。
我目前正在尝试设计一个实验Labjs,想知道是否有一种方法,使网站更响应屏幕大小使用HTML或CSS?我的意思是,我可以使用CSS/HTML根据用户屏幕的大小来调整刺激的大小吗?
我现在的CSS代码是这样的:

/* Please define your custom styles here */

cons_left {
  margin-left: 10%;
  margin-right: 10%;
} 

.pickparent {
  position: relative;
  top: 0;
  left: 0;
 // border: 3px solid black;
} 

.pickpicker {
  position: relative;
  top: 0;
  left: 0;
//  border: 3px solid red;
} 

.pickimage {
  filter: grayscale(100%);
  position: absolute;
  margin: auto;
  z-index: 2;
 // border: 3px solid red;
} 

#location_percentage, #color_percentage {
  font-size: 70px;
  text-align: center;
  display: block;
  margin: 0 auto;
}

.feedback, .percentage {
  font-size: 70px;
  text-align: center;
}

.feedback {
  font-size: 70px;
  margin-top: 450px;
  display: block;
  line-height: 70px;
}

.feedback:first-line {
  font-size: 70px;
  margin-top: 100px;
  display: block;
  line-height: 120px;
}

.percentage {
  margin-top: 20px;
  margin-bottom: 20px;
}

#next-button {
    display: none;
    align-items: center;
  }

.message {
  font-size: 50px;
  text-align: center;
  position: absolute
  margin: 20%
}

我试过改变CSS的各种属性,使其响应,但我还没有运气到目前为止。我还尝试实现了一个缩放任务,用户必须将矩形的大小调整为卡片的大小,但我在这里也找不到解决方案。
谢谢你的帮助!

zpqajqem

zpqajqem1#

您可以使用媒体查询为您的网站做出响应的屏幕大小。

@media only screen and (max-width: 
600px) {
  body {
   background-color: lightblue;
  }
}

你可以在这里了解更多:W3schools media queries

zbdgwd5y

zbdgwd5y2#

您可以使用CSS媒体查询根据屏幕大小对网站进行样式化。

例如:

.message {
  font-size: 50px;
  margin: 20%;
  position: absolute;
}

@media screen and (min-width: 600){
.message {
  font-size: 70px;
  margin: 50%;
}
}

在上面的代码message类中,font-size设置为50 px,margin设置为20%。但在大于600 px的屏幕上,字体大小设置为70 px,边距设置为50%。
如果您没有指定媒体查询,它将应用于所有屏幕尺寸。
您不需要重复规则,例如,位置应用于所有屏幕尺寸,因此无需在媒体查询中指定它。
Similar question
Mozilla CSS_media_queries

相关问题