Question

最好的方法是什么？如果全屏显示“全屏会员” 如果手机或平板电脑大小，则显示“请使用全屏”并隐藏 textA 谢谢！！！

 @media only screen and (min-width: 301px) {
html,body{
  height: 100vh;
  width: 100%;
  background: #356aa0;
}
.fullScreen{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50% , -50%);
  background: #fff;
  width: 400px;
  border-radius: 12px;
  text-align: center;

}
p {
display:none
}

 @media only screen and (max-width: 300px) {
  body {
    background-color: red;
    
  }
  p {
display:block
}
}

<div class="fullScreen">
FULL SCREEN MEMBERSHIP
    </div>
 
 

 <p id="mobile">Please use Full Screen</p>

Answer 1

试试这个：

html,
body {
  height: 100vh;
  width: 100%;
  background: #356aa0;
}

.fullScreen {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  width: 400px;
  border-radius: 12px;
  text-align: center;
}

p {
  display: none
}

@media only screen and (max-width: 300px) {
  p {
    display: block !important;
  }
  .fullScreen{
    display:none;
  }
}

<div class="fullScreen">
  FULL SCREEN MEMBERSHIP
</div>



<p id="mobile">Please use Full Screen</p>

全屏显示文字A，手机屏幕显示文字B

1 个答案: