响应式网站

Question

我已经设法建立了一个“像样的”网站(在我看来，对于初学者来说)。布局是这样的：

​

​

我意识到的一件事是，当我用手机打开它时，它会变得非常混乱：

​

​

所以，我决定在谷歌上搜索“响应式网站”，有相当多的事情要做，所以我想在此期间，当人们用手机访问我的网站时，就像他们用pc的浏览器打开一样，他们可能需要缩小一点，所以当他们访问我的网站时，他们会看到：

​

​

那么，我应该在我的代码行中添加什么来使我的布局在每种屏幕尺寸下都“锁定”？(对不起，如果我说得不清楚的话)

PS :我试图在这个website中实现的东西(请注意当我们放大时布局是如何不受影响的)

Answer 1

要让移动浏览器上的网站像在pc浏览器上一样删除meta标签，请使用

name=“视区”

并且不要在css中使用媒体查询

Answer 2

网站上的工作做得很好。要对移动响应进行一些操作，您可以执行以下操作：

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

下一步是添加bootstrap或media查询。为了节省空间，人们使用媒体查询，并划分部分，以便网站在不同设备上看起来不同，人们使用引导类。

可以在w3schools上找到示例。