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

Question

我甚至没有谈论移动设备（刚才），我根据笔记本电脑显示器的像素数设置宽度和高度，但在我的台式机22“显示器上，一切都不合适，div线也是短（更大的显示，所以它是有道理的）等。

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

另外，我看到一些网站，他们在缩小浏览器窗口时调整内容（看起来像“margin：0 auto”的效果，只是保持中心），而且，当宽度变得足够小时，它只是停止调整，它停止因为再移动而内容将开始移动到它下面的线以便适合......我怎样才能得到同样的效果？

谢谢！

Answer 1

这是通过让您的网站“响应”来完成的，这基本上意味着您使用可扩展的网格系统并且屏幕尺寸发生变化。

有一些框架可以帮助解决这个问题。我最喜欢的是基金会（http://foundation.zurb.com/），但还有其他一些如bootstrap（http://getbootstrap.com/）

这些网站上有大量文档，您应该关注网格部分： http://foundation.zurb.com/docs/components/grid.html

希望有所帮助。

Answer 2

有些网站使用自适应布局。意味着你有移动屏幕，平板电脑以及全尺寸个人电脑/笔记本电脑屏幕的方向/一切固定。

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

• Twitter Bootstrap（两个不同的版本，具有不同的UI和 方法可在http://getbootstrap.com/2.3.2/获得 http://getbootstrap.com/）这是我最喜欢的，因为它太容易了 使用
• Zurb Foundation
• Skeleton
• html5 Boilerplate
• Sprout Core
• Less Framework

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

Answer 3

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

例如，获取窗口大小的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;    
             }

http://jsfiddle.net/xv7Yf/