ホーム>source

ボーダーブロックのあるヘッダーがありますが、全幅を使用できず、ウェブサイトを大きな画面で開くと応答しません。サイズがすべて変更されると、どのように変更できますか?

これは、通常のラップトップ画面でどのように見えるかです。

LaptopScreen:

これは通常の画面でどのように見えるかです

<div class="header">
  <div class="info">
    <h1>Welcome to TaxiWorld</h1>
    <div class="borderPics">
   <div class="meta">
   <br>
      <a  href="https://twitter.com/nodws" target="_b" class="author"></a>
      <img src="LogoBenchMark.png" alt="Girl in a jacket" style="height: 54px; width:54px;">
     <hr align="left" width="75%"><br>
    </div>
     <div class="meta">
        <br>
      <a  href="https://twitter.com/nodws" target="_b" class="author"></a>
      <img src="LogoBenchMark.png" alt="Girl in a jacket" style="height: 54px; width:54px;">
     <hr align="left" width="75%"><br>
    </div>
     <div class="meta">
        <br>
      <a  href="https://twitter.com/nodws" target="_b" class="author"></a>
      <img src="LogoBenchMark.png" alt="Girl in a jacket" style="height: 54px; width:54px;";>
     <hr align="left" width="75%"><br>
    </div>
</div>
</div>

cssで何を変更する必要があるので、両方の画面で同じ画面が表示されます。

.borderPics{
    border-style: solid;
    border-width: medium;
    background-color:rgba(0,0,0,0.35);
    border-color:transparent;
padding: 1.25rem 0;
    padding-bottom: 0;
}

.author{
  display:inline-block;
  width:50px;
  height:50px;
  border-radius:10%;
  background:url(car.jpg) center no-repeat;
  background-size:cover;
  box-shadow:0 2px 3px rgba(0,0,0,0.3);
  margin-bottom:3px
}
.header:before{
  content:"";
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1.0, 1.0);
    transform: translateZ(0);
  background:#1B2030 url(taxi.jpg) top center no-repeat;    
  background-size:cover;
  background-attachment:fixed;
  animation: grow 60s  linear 10ms infinite;
  transition:all 0.2s ease-in-out;
  z-index:-2
}

あなたの答え
  • 解決した方法 # 1

    このため、 使用する

       @media only screen and (min-width:1024px) {
           //neccessary CSS for normal screen
        }
    
    

  • 前へ java - JPAクエリ:サブクエリをグループ化条件に結合する
  • 次へ python - 最後の1つの有効なアイテムの値を置き換えます。パンダ