device-width是设备的宽度；width是浏览器的可视宽度。

要看到第一个的效果，需要打开控制台，点击菜单栏左侧的“手机pad图案”图标。

min-device-width是设备整个显示区域的宽度，例如，真实的设备屏幕宽度。

max-width是目标显示区域的宽度，例如，浏览器宽度。

视频案例使用的是min-device-width，也就说他是根据你的屏幕宽度设置的。你需要F12调出手机模拟窗口，这样就可以根据模拟的手机屏幕宽度而不是你的电脑屏幕宽度来设置。

如何你想在电脑上拖动浏览器来更改适配样式则可以将min-device-width更换为max-width

直接在浏览器窗口拖动改变窗口的宽高大小就可以查看不同大小的页面宽高下页面效果了。