如何适应移动设备

我已经建立了一个在PC，笔记本电脑和Ipad设备上功能齐全的网站。我想扩大它以采取移动电话。我遇到的问题是我不确定最好的方法来做到这一点。我目前在我的网站中使用主题。我认为做到这一点的最好方法是检测设备并根据它是手机还是PC来更改主题。我发现的很多例子展示了当你连接样式表时如何做到这一点。如何适应移动设备

<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />

我应该通过链接的样式表这样做，或者我可以做到这一点与不知何故一个主题？

来源

2012-08-17 jackncoke

您正处于正确的轨道上面。这是一个很好的研究起点：http://www.alistapart.com/articles/responsive-web-design/ – 2012-08-17 13:07:19

不幸的是，你最后通过添加移动支持来做到这一点很困难。对于您的下一个项目，我强烈建议[移动第一响应式设计]（http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/）方法。 – jrummell 2012-08-17 13:09:23

好问题，我会在1周后处理它 – GLES 2012-08-17 13:23:12

大多数Desktop + Mobile主题的工作方式与以下代码类似。最好的方法是使用@media查询（check this link和this one）。不要使用更多的样式表，只能使用其中一个。

@media screen and (min-device-width: 801px) { 
    /* Your style here */ 
} 

@media screen and (max-device-width: 800px) { 
    /* Your style here for mobile */ 
}

来源

2012-08-17 13:41:54

如何适应移动设备

回答

相关问题