时间戳

首页 > 解决方案 > 如何更改我的标题和边框块在小屏幕和大屏幕上的响应

html - 如何更改我的标题和边框块在小屏幕和大屏幕上的响应

问题描述

我有一个带有边框块的标题，但它不占用整个宽度，如果我在更大的屏幕上打开我的网站，它没有响应，尺寸一切都改变了我该如何改变这个？

这就是它在普通笔记本电脑屏幕上的外观。

笔记本电脑屏幕：

笔记本电脑屏幕

这是它在普通屏幕上的样子 这是它在普通屏幕上的样子

<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
}

标签： htmlcssresponsive-design

解决方案

为此，使用

    @media only screen and (min-width:1024px) {

       //neccessary CSS for normal screen

    }

推荐阅读