Html 什么'；让我的网站与所有屏幕尺寸兼容的最佳方法是什么？

我甚至不是在谈论移动设备（就目前而言），我根据笔记本电脑显示器的像素数设置宽度和高度，但在我的台式22英寸显示器上，一切都不对位，div线太短（显示器更大，所以有意义），等等

我想我应该严格使用百分比，所以不是“宽度：200px”，而是“宽度：64%”，这是一个好的解决方案吗

另外，我看到一些网站，当你缩小浏览器窗口时，它们会调整内容（看起来像是“margin:0auto”的效果，只是保持事物的中心），但是，当宽度变得足够小时，它就会停止调整，它停止了，因为再移动，内容就会开始移动到它下面的行以适应…我如何才能获得相同的效果

---

谢谢！

这是通过使您的站点“响应性”来实现的，这基本上意味着您使用的网格系统可以进行缩放，并且屏幕大小会发生变化

有几个框架可以帮助这个。我最喜欢的是基金会（），但是还有一些类似Bootstrap（）< /P> 这些站点上有大量文档，您应该关注网格部分：

---

希望这能有所帮助。

有一些网站使用响应式布局。这意味着您已经为移动屏幕、平板电脑以及全尺寸pc/笔记本电脑屏幕确定了方向/一切

他们使用网格系统。 常见的是

• Twitter引导（两个不同版本，具有不同的UI和 有关方法，请访问和 )这件是我最喜欢的，因为它太容易穿了 使用

你可以选择你喜欢的任何一个。它们都提供了一个基本的css和javascript来很好地处理事情，提供了一个完整网站的线框，并且在他们的网站上提供了一个非常好的文档手册。这实际上很有趣，而且可以让工作更快。

---

干杯！

一个有用且推荐的单位是将相应调整的视口百分比长度

例如，要获取窗口大小的div，并在第一个div的顶部获取另一个div，请执行以下操作：

            <div id='one-page'></div>
            <div id='inside'></div>

              #one-page{
                 width:100vw;
                 height:100vh;
                 background:red;
                position:relative;              
               }
             #inside{
                width:10vw;
                height:10vh;
                background:black;
                position:absolute;
                top:10vh;
                left:20vw;    
             }

#一页{
宽度：100vw；
高度：100vh；
背景：红色；
位置：相对位置；
}
#里面{
宽度：10vw；
高度：10vh；
背景：黑色；
位置：绝对位置；
顶部：10vh；
左：20vw；
}

---

这当然很有帮助，谢谢。我要做的是基金会——明确地说，我只是下载了“默认CSS”“文件，并将CSS代码放入我的主CSS文件？好的，不，它看起来并不那么简单。。。看起来我必须用网格系统重新构建我的网站？要想有一个真正响应的网站，你应该使用某种网格系统对其进行编码。您可以处理站点的某些部分，但通常最好从一开始就使用网格。因此，您不必为网格重新编码站点，这通常是一个好主意（或至少是其中的一部分）。另外，需要注意的是，您可以将网格嵌入到某些区域中，而这些区域将是响应性的。