我可以使用媒体查询来有效地创建单独的移动网站吗？

Question

我已经决定最好有一个响应式网站而不是一个m.domain单独的网站。但是，我确实希望移动版本显示在一个非常剥离的级别：http://i.imgur.com/oF7uJwm.png。是否可以使用媒体查询去除桌面版http://www.traditional-cleaning.co.uk/cleaning-in-durham.htm上显示的所有内容（并在小型设备上查看时添加新的移动设计）？

Answer 1

响应式设计围绕着针对特定设备和视口大小的媒体查询概念而构建。考虑到这一点，您可以在移动视角下编写初始CSS，然后使用媒体查询在视口大小增加时有选择地提供其他样式。这可能与您通常采用响应式设计的方法相反：从大开始然后减少。

使用移动第一视角，我们首先在较小的平台上加载绝对的基本要素。这导致了更快捷的体验，避免了不必要的延迟。额外的资源严格按照必要的基础加载到可以很好地处理它们的平台上。

使用媒体查询时：在min-width上使用min-device-width以确保获得最广泛的体验。使用元素的相对大小以避免破坏布局。

这些是我在设计移动网站时经常遵循的一些好的指南。

移动网页设计的7个关键原则

1. 优先考虑...基于最受欢迎和/或重要内容的移动设计

2. 所有内容都应该可用...或者至少是用户正在寻找的大部分内容。

3. 限制导航选项......挑选您放在前面和中心的信息

4. 按钮很重要......使用尺寸易于点击的元素

5. 观看您的媒体...请留意过大的图片文件，加载了太多不必要字符的臃肿字体，以及格式化的视频（如Flash） - 这些视频无法在某些移动操作系统上播放。

6. 弹出窗口存在问题......请勿在移动访问者身上投放太多弹出式调查问卷或注册框，否则会让他们感到恼火。

7. 不要求太多文字......当你用拇指打字时，表格很难填写。

进一步阅读：Google's web design basics，Mobile first - why it's great and why it sucks

Answer 2

这很有可能。取决于网站的结构DIV明智。 我想你可以使用display：none;在CSS中，但这又取决于结构和样式。