Question

我正在尝试将我的网站调整为所有移动设备。通过调整我的意思是网站应该看起来与桌面版本完全一样，只是很小。我尝试使用变换，但似乎没有对它产生好的影响。

我尝试像bs.to这样做，所有内容看起来都一样，在桌面上和移动设备上一样。

让我们用搜索栏试试吧。

HTML的代码

.outercontainer {
  width: 1200px;
  height: auto;
  margin: 0 auto;
  border-width: 1px;
  border-style: solid;
}


/*Navigation-Struktur*/

.grid-container {
  display: grid;
  grid-template-rows: 45px;
  grid-template-columns: auto auto auto auto auto auto;
  background-color: black;
}

.grid-container a {
  text-decoration: none;
  color: white;
}

.grid-container>div {
  text-align: center;
  color: whitesmoke;
  font-size: 18px;
  align-self: center;
}


/*Searchbar*/

.grid-item3 {
  grid-column-start: 3;
  grid-column-end: 5;
}

<div class="outercontainer">
  <div class="grid-container">
    <div class="grid-item1"> <strong style="font-size: 25px;">Deutschland</strong></div>
    <div class="grid-item2">
      Kategorie:
      <select>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="opel">Opel</option>
        <option value="audi">Audi</option>
      </select>
    </div>
    <div class="grid-item3"> <input type="text" placeholder="Suche deine Events..." style="width: 100%;font-size:17px;"></div>
    <div class="grid-item4"> <a href="#">Anmelden </a></div>
    <div class="grid-item5"> <a href="#"> Registrieren</a></div>
  </div>
</div>

我尝试将宽度更改为100％，最大宽度：1200px，但我需要代码来调整搜索栏中元素的大小。怎么做：将元素调整到实际屏幕大小，所以它看起来像桌面版的迷你版

Answer 1

您可以从代码的<head>部分删除以下一行：

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

然后页面将缩小到屏幕大小。

然而，这与响应式设计无关，被认为是相当不专业的（并且绝对没有用）......

转换网站，使其像一个迷你版的桌面网站

1 个答案: