移动优先和非移动优先响应布局之间有什么区别？

Question

好吧,我不确定我mobile first和non mobile first响应式布局之间有什么区别？

这就是我所知道的,也许有些事情是不对的:

1. 使用CSS的媒体查询(也适用于非移动的第一个布局)
2. 从移动而非桌面版本开始创建布局

我看到bootstrap设置和foundation设置之间存在差异,这种差异是否重要？

<!-- Bootstrap -->
<!-- I've read it's not mobile first -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Foundation -->
<!-- I've read it's mobile first -->
<meta name="viewport" content="width=device-width"> 

最后,我所知道的,还有更多值得了解的东西吗？
哪里可以找到一个好的指南？

Answer 1

就像它说的......

"移动优先"和"非移动优先"布局.

移动优先从一开始就意味着它看起来你想要它在移动设备中的外观.然后在大多数情况下,您可以使用最小宽度的媒体查询来根据更大的屏幕尺寸进行调整.

非移动优先意味着您首先为桌面或大屏幕设计它.然后在大多数情况下使用最大宽度媒体查询返回并使其在较小/移动屏幕中看起来更好.

我听说浏览器理解min-device-width和max-device-width存在问题.只需使用最小宽度和最大宽度.

如果您设计响应式主题,最好先启动移动设备.

观看此视频:http://www.youtube.com/watch？v = -BVmrSG93XE