文章/答案/技术大牛

发布

社区首页 >问答首页 >改造网站，使其成为桌面网站的迷你版

问改造网站，使其成为桌面网站的迷你版
EN

Stack Overflow用户

提问于 2018-05-09 03:41:17

回答 1查看 53关注 0票数 1

我正在尝试调整我的网站以适应所有移动设备。我调整的意思是，网站看起来应该和桌面版本一模一样，只是要小一点。我用transform试过了，但看起来效果不好。

我试着像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>

我试图用max- width :1200px将宽度改为100%，但我需要代码来调整搜索栏中元素的大小。操作方法:根据实际屏幕尺寸调整元素，使其看起来像是桌面版的迷你版

html

css

回答 1

Stack Overflow用户

发布于 2018-05-09 03:45:44

您可以简单地从代码的<head>部分中删除以下行：

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

然后页面将被缩小到屏幕的任何大小。

然而，这与响应式设计无关，而且被认为是相当不专业的(当然也不是有用的)……

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50241174

复制

相似问题

问改造网站，使其成为桌面网站的迷你版
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问改造网站，使其成为桌面网站的迷你版EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问改造网站，使其成为桌面网站的迷你版
EN