如何使页面适合任何方向的任何屏幕

Question

我在网站上工作，而不是在任何屏幕和任何设备上都可见，我前几天看到了这个网站。

使用google chrome的开发者工具和＆＃34;模拟＆＃34;检查页面。设备的宽度和高度我看到页面适合任何分辨率和方向。

Image on landscape and as an iPhone

Image on portrait as a Samsung device

我想知道如何在没有与css过多争吵的情况下获得这个。

提前致谢。

PS：我也从手机上看了三星Galaxy S3 Mini的网站，它完全适合屏幕。

Answer 1

我将使这个答案尽可能有用，并尽我所能：

您需要花几个小时阅读所有可以抓取的响应式网页设计和开发，之后才能开始探索正确的工具，让您的CSS生活更轻松。

响应式开发中的很多内容也取决于您的应用程序。要使事情简单，您应该开始使用HTML，JavaScript和CSS。您使用的任何库都必须直接与这些语言相关联。

一个重要的经验法则是：总是尝试使用CSS进行响应式开发，但如果你不能用很好的理由，那么只有这样才能依赖JavaScript。如果您在阅读我的答案的第一段后没有了解为什么这很重要，那么您应该花更多的时间来回应响应式网页设计和开发（这是值得的！）。

正如您将发现的，有许多技术和CSS库可用于制作响应式网页设计。我可以给你的一个指导原则是：你可以学习制作自己的响应式开发，这在实践中会带来更精简的代码，它还可以帮助你理解更强大的库如何做到这一点（例如 Bootstrap < / strong>，等等。）

1. 了解并了解 media queries 。
2. 了解 advanced CSS contepts ，例如mixins，以及如何将它们与＃1结合使用，让您的编码生活更轻松。
3. 了解 grids 和 fluid grids 的所有内容，然后查看（今天的）现代概念，例如 flexbox ，它将帮助您进行个人和全局布局。确保你自己可以做到！ （这不是一个很大的挑战，一次只做一小步，做一些教程）。
4. 开始深入研究一些简洁的CSS框架，例如 Foundation ， Bootstrap ， Ionic Framework ，等等。您必须花时间了解 他们可以如何帮助您， 他们可以为您做什么，提取只是您需要的（例如：我只需要使用网格系统）， 他们是社区驱动的吗？ （重要的是不要依赖过时的工具）。
5. 不要忘记你的好朋友JavaScript（以及你可以使用的大量框架）。请务必赞扬使用CSS无法实现的任何行为，以实现您的响应行为，不反过来。
6. 最后但绝对不是是跨浏览器的兼容性：一旦你在CSS中足够深入，你往往会忘记总是使用跨浏览器兼容的技术。这需要大量的 - 自己动手 - 研究，但这并不是非常困难，只需坚持使用适合您和实施的内容。

所以......只有在你完成一些阅读，玩代码并开始找到障碍之后，你是否应该回到这里并开始提出任意数量的问题。这样我们社区就可以为您提供帮助。

祝你好运！

P.S。：这是一篇有趣的文章，可以帮助您入门： Holy Grail Layout