1. 首页
  2. css

CSS混合响应式设计和移动模板

你的网站需要一个移动策略。你必须选择响应性设计或专用移动网站,对吗?也许不是。也许你可以混合搭配各种策略。
我和团队每天都在努力学习CodePen。但我们是一个三人小组。我们的移动战略是尽我们所能地节省开支,因为我们1)有时间,2)对如何处理事情有很好的想法。响应模板的示例
以我们最近的活动页面为例。这个页面非常简单,编写几个媒体查询来洗牌,再编写一点JavaScript来切换过滤器是一个不错的解决方案:移动特定模板的示例
现在看看我们的详细信息页面桌面:
这个页面要复杂得多。它与编辑器视图共享相同的布局。可以单击并拖动预览区域使其变大或变小。有键盘命令。把它放在桌面上是很尴尬的,因为文本是微观的。使用适当的meta标记并使其以移动大小加载,这使得布局和滚动都非常困难,而这是完全可能的。
这是我们整个站点上最糟糕的移动视图。
我本可以用CSS与此视图开战,并将其粉碎。但即使我这样做了,还是有相当一部分JavaScript被加载,不再有任何用途。相反,我决定使用一个特定于移动设备的模板。通过这种方式,我能够完全控制HTML、CSS和JavaScript,并且只加载所需的内容。我能够重用几乎所有的东西,因为我们从模块化的角度来处理所有的东西。我可以选择HTML部分、JS模块,然后编译一个新的CSS文件,只需要我所需要的部分——从头开始写的很少。
详细信息视图现在更可用了,更不用说更快了。
对于好奇的人来说,我们使用浏览器gem并选择要在控制器级别渲染的模板。它是UA嗅探,感觉不太好,但至少它是服务器端的,并且基于一个开源项目,这个项目是最新的,在移动版上,你可以在桌面版上做任何事情。菜单导航,而不是选项卡。
更好一点,无论如何。这是一个过程
我写博客不是为了炫耀CodePen作为移动设计完美的灯塔。当然不是。我确实认为考虑混合和迭代的移动开发方法很有趣。
没有单独的域/URL,没有单独的存储库/代码库,没有单独的团队。一切都像一个大怪物。我觉得应该是这样的。非常相关
RESS:响应式设计+服务器端组件
<1我觉得服务器端UA嗅探更好一些,因为1)立即提供正确的模板,这不是重定向,客户端UA测试意味着只为此提供一大块JavaScript。

CSS混合响应式设计和移动模板 为WP2原创文章,链接:https://www.wp2.cn/css/css%e6%b7%b7%e5%90%88%e5%93%8d%e5%ba%94%e5%bc%8f%e8%ae%be%e8%ae%a1%e5%92%8c%e7%a7%bb%e5%8a%a8%e6%a8%a1%e6%9d%bf/