facebook是否为移动和桌面设计了不同的网页

Question

我是web开发人员的新手，但已经习惯了HTML和CSS为我的项目设计了一些社交网络网页，但我感到困惑。

我是不是要把移动网页和桌面分开设计？如果是，是否可以使用php告诉设备发送哪个页面？

最后，Facebook使用这种方法吗？

Answer 1

它们不会是完全不同的页面，但会针对不同的设备大小使用断点。

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

这是涉及到的CSS的一个示例。您可以在https://www.w3schools.com/csSref/css3_pr_mediaquery.asp上找到更多信息

Answer 2

欢迎使用stack。首先，这不是问这种类型的最好的地方，我想看看Software Engineering 。我不熟悉facebook的内部工作原理，但我认为，由于他们是一家大公司，他们会从头开始创建移动网站，以获得最佳的用户体验。不过，您不必从头开始创建移动站点。您可以使用responsive web design同时创建移动站点和桌面站点。这是使用css和html处理的，所以您可以使用php服务器代码或任何服务器代码来处理，但php代码并不负责。有很多ui框架可以帮助你做到这一点，比如bootstrap。

Answer 3

为了实现不同的视图，取决于获取页面的设备，你应该使用响应式框架，并且你不需要多次设计你的页面(例如移动和桌面)

您可以创建一个或使用类似于bootstrap的内容

使用世界上最流行的前端组件库在web上构建响应式的、移动优先的项目。

Bootstrap是一个用于使用HTML、CSS和JS进行开发的开源工具包。使用我们的Sass变量和混合、响应式网格系统、广泛的预置组件以及基于jQuery构建的强大插件，快速构建您的想法原型或构建整个应用程序。

Bootstrap适用于任何语言，甚至PHP。

Facebook也开发并使用了React。