如何打造一个移动友好的网站:CSS的响应性设计
由于世界上有这么多的人使用智能手机上网，越来越多的网站管理员正在寻找能让他们的网站移动友好的方法。这通常意味着通过提供一个单独的页面，在这些设备上找到更小的屏幕尺寸，或者是让他们的网站自动适应收缩的东西和移动的东西。通常称为“响应式web设计”，在本教程系列中介绍。
先决条件
由于本教程涉及到您需要对网站底层代码进行的更改，因此您需要了解一些HTML和CSS。您不需要成为专家，但是一些知识是必要的。
响应网页设计
在响应式设计中，我们将展示桌面或笔记本电脑用户看到的同一网页。只有级联样式表或CSS会有所不同。也就是说，桌面/笔记本电脑上的浏览器会使用一组CSS指令来呈现页面，而在移动电话上使用的则是另一组。
这种工作方法不仅节省了为每一种用户创建不同的页面集的工作，而且还省去了多年维护这两套的麻烦，试图使它们保持同步。
克服移动设备的默认值:Viewport
现代智能手机的浏览器是用传统的电脑显示器设计的。因此，它通过假装自己的网站来适应它的电脑大小的屏幕和缩放所有的东西来适应它。例如，在iPhone 5上的Safari浏览器默认显示它的屏幕宽度为980像素，尽管它的实际尺寸是320像素(在竖屏模式中)。所以，如果你要设计一个固定宽度(比如说)730像素的网站，它的整个宽度会适合你的手机屏幕，即使后者不是那么宽。浏览器通过缩小你的网站来实现这一点，这样一切都变得非常小。如果用户需要阅读任何东西，他们将不得不放大相关的部分。通过使用智能手机，你可以看到这个效果。这一特定页面的宽度为730像素，故意设计不适合你使用手机。
由于这一默认的假设设备的宽度为980像素，自动缩放内容会挫败我们为移动用户手工创建舒适体验的尝试，所以我们必须在做任何有意义的事情之前重写它。
移动屏幕分辨率/宽度
下面是一些常用移动设备的浏览器屏幕宽度列表。该榜单并不全面，因为新品牌和新车型一直都在发布。但是，这个列表足以让你了解到你需要容纳哪些类型的尺寸。
240像素(老安卓竖屏模式)
320像素(iPhone 3至5,iPhone SE竖屏模式)
375像素(iPhone 6和7肖像)
384像素(安卓Nexus人像)
414像素(iPhone 6 + 7 +人像)
480像素(iPhone 3和4横屏模式)
568像素(iPhone 5景观)
600像素(Android Nexus景观，Kindle肖像)
667像素(iPhone 6和7景观)
736像素(iPhone 6 + 7 +景观)
768像素(iPad肖像)
1024像素(iPad景观)
与Web浏览器的兼容性
允许我们测试屏幕大小的媒体查询工具是web浏览器场景的后来者。也就是说，CSS已经存在了很多年，在标准中包括了对特定的屏幕尺寸有条件地应用某些规则的方法。因此，非常老的浏览器不支持这些特性。
据我所知，在智能手机方面，只有Android浏览器才支持媒体查询，从2.1版开始，在iphone的Safari 3.2和以上，黑莓7和后来，Opera移动12和之后，Opera Mini 8，以及IE(IE)移动10和以上。
在桌面/笔记本浏览器的前面，支持似乎已经从ie9、Firefox 3.5、Safari 4和Chrome 4开始。Microsoft Edge，因为它最初是基于IE 11的代码，所以一直有媒体查询支持。
鉴于上述情况，在你的网站上使用媒体查询有多安全?
很大程度上取决于你网站的人口统计。例如，如果你的网站上有很多人使用IE mobile 9和更早的手机，你可能会想要支持他们。
这并非不可能，因为IE的早期版本允许使用条件注释，其中可以包含只由它们呈现的规则，而不是其他浏览器。因此，可以在不使用媒体查询的情况下检测这些浏览器。
或者，您可以使用JavaScript来检测屏幕大小并相应地调整样式表。甚至还有免费的java脚本在Internet上运行，它可以实现早期IE版本的媒体查询，虽然我还没有尝试过，因此无法为它们提供担保。
如果你的站点很少有访问者使用这些旧的移动浏览器，那么你必须决定是否要为他们专门创建一个解决方案。你可能会发现，你需要花费的时间和精力与实际受益的人数不成比例。而这个数字只会随着时间的推移而减少。因此，您可能想让这样的用户使用默认样式表来查看您的站点(这是每个人都会看到的，在您突然决定创建一个移动友好的样式表之前)。