我什至还没有谈论移动设备（还没有），我根据笔记本电脑显示屏的像素数设置宽度和高度，但是在我的台式机 22 英寸显示器上，一切都不合适，div 线太短（更大显示，所以这是有道理的）等。
我想我应该严格使用百分比，所以不是“宽度：200px”，而是“宽度：64%”，这是一个好的解决方案吗？
另外，我看到一些网站，它们会在您缩小浏览器窗口时调整内容（看起来像“margin：0 auto”的效果，只是保持居中），而且当宽度变得足够小时，它就会停止调整，它会停止，因为不再移动，并且内容将开始移动到其下方的行以适应...我怎样才能获得相同的效果？
谢谢！
这是通过使您的网站“响应”来完成的，这基本上意味着您使用可缩放的网格系统并且屏幕尺寸会发生变化。
有几个框架可以帮助解决这个问题。我最喜欢的是 Foundation ( http://foundation.zurb.com/ )，但还有其他像 bootstrap ( http://getbootstrap.com/ )
这些网站上有大量文档，您应该关注网格部分： http: //foundation.zurb.com/docs/components/grid.html
希望有帮助。
有些网站使用响应式布局。意味着您为移动屏幕、平板电脑以及全尺寸 PC/笔记本电脑屏幕固定了方向/所有内容。
他们使用网格系统。常见的是
你可以选择任何你喜欢的。他们都提供了一个基本的 css 和 javascript 来很好地处理事情，提供了一个完整网站的线框，并且在他们的网站上提供了一个非常有据可查的手册。它实际上很有趣，并且使工作更快。
干杯!
一个有用且推荐的单位是视口百分比长度，它将相应调整。
例如获取窗口大小的 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;
}