【发布时间】：2016-04-09 23:03:44
【问题描述】：
媒体查询以创建网站的两个版本？手机和桌面？！
有什么建议吗？？
通常内联媒体查询对我来说工作得很好，但与桌面网站相比，网站需要的外观差异很大，所以我想有两个完全独立的样式表？
【问题讨论】：
标签： html css mobile web responsive-design
【发布时间】：2016-04-09 23:03:44
【问题描述】：
我的建议，基本样式和所有@media 查询在单独的样式表中，移动和桌面样式当然会加载，但如果缩小不应该有太大影响。
还尝试在覆盖尽可能少的基本样式规则之间找到平衡，只需扩展那些需要不同的少数属性。
如果您的网站仍在不断发展，您可能会发现覆盖更多规则而不是智能扩展更容易维护，但应始终优先考虑尽快优化。
【讨论】：
-
太棒了。谢谢你的建议。我一定会缩小样式表！
是的，您可以根据屏幕尺寸定位不同的 .css 文件。
例如将其添加到<head> 部分
<link rel='stylesheet' media='screen and (max-width: 900px)' href='css/medium.css' />
这将为 900 像素以下的屏幕尺寸设置一个新的 css 文件。
【讨论】：
-
感谢您的回复。我知道这是可能的，但不确定我应该如何使用媒体查询 - 即是否将它们放在一个样式表中，或者实际上有不同的样式表！认为我会反复试验！
使用带有以下媒体查询的单个样式表。使用单个样式表将减少页面加载时间。
使用多个（超过您计划的 2 个）媒体查询将大大改善用户体验，尤其是在多任务处理时。
(max-width: 640px){your css style}
(min-width: 641px) and (max-width: 800px){your css style}
(min-width: 801px) and (max-width: 1024px){your css style}
(min-width: 1025px){your css style}
如果您不使用屏幕尺寸，只需将其抽象化即可。您将来可能需要它。
【讨论】：
-
“使用单个样式表会减少页面加载时间”——不正确
-
添加更多的 css 文件会产生更多的 http 请求，进而影响页面加载时间。特别是在慢速连接中。 blog.teamtreehouse.com/speeding-up-page-load-times