示例：我的mysite.com有一个包含所有必要样式的样式表(让我们说它是一个非常大的文件).此时,我的所有样式都没有针对较低的屏幕分辨率或其他设备.
然后,我决定制作我的网站的移动版本.为了方便起见,我现在只针对iPhone用户,如果代码检测到有人在iPhone上访问我的网站,他们就会获得移动版本.
我的问题：包含这些额外样式的最佳位置在哪里,以便用户看到移动版本？我应该在原始样式表中包含这些样式,还是如果我将它们分离到自己的样式表中会更好？
假设我的网站完全由浮动内容构建,但我的移动版本只会显示每个元素堆叠在一起.如何使用媒体查询显示？它就像声明float：none一样简单;或者其他的东西？
基本上,我在上面的段落中要求的是,我如何构建我的样式表,例如,基本颜色和可能链接位置或移动版本中存在的任何内容,如桌面版本但有差异比如在移动版中将所有东西堆叠在一起？
样式表的媒体查询部分中的规则基本上是“覆盖”您在非媒体查询部分中声明的内容吗？
我发现了许多使用媒体查询的例子,但我找不到一个完整网站的工作示例.如果我在同一个HTML页面中链接了一个mobile.css和main.css,那么它们如何协同工作以在移动版本中保留我网站的某些方面但更改其他方面？
最后一个问题：是否可以采用完全固定宽度的设计,但仍然使用媒体查询？代码仍然能够检测浏览器何时收缩或扩展超过某个宽度/高度,是否正确？
对不起这个漫长且可能令人困惑的问题.我希望你能说出我想问的问题.
解决方法
>普通CSS,底部有媒体查询(因此它们覆盖上面的CSS)
>使用link元素上的媒体查询加载两个(或更多)CSS文件
>服务器端检测,在HTML中添加不同的CSS链接
>服务器端检测然后重定向到m.example.com或example.com/mobile
如果你正在谈论微小的变化(浮动：无,不同的字体大小等),那么我会去1.
如果CSS有很多很多变化,我会使用2或3(3不是很好,因为你依赖于用户,而不是屏幕属性).如果HTML和CSS发生变化,我会使用4.
对于所有这些,请检查您在Internet Explorer 6 – 8中的工作,他们可能会忽略媒体查询并使用所有CSS,包括移动位(如果您使用1).
有关使用1和2的网站的一些示例,请查看http://mediaqueri.es/.
这是另一个可能有用的资源：https://docs.google.com/present/view?id=dkx3qtm_22dxsrgcf4
