Question

我正在使用引导程序和媒体查询创建响应式网站。这是一个良好的开端，然而，当我将我的网站从桌面视图缩小到移动设备时，有一些断点使得网站看起来不那么好。当我缩小浏览器窗口时，没有这个问题，是否有任何特定的维度，我可以针对所有设备上的响应式网站？如果有人知道请尽可能详细。我想知道所有移动/平板/平板设备，肖像和风景的确切尺寸。

感谢。

Answer 1

您可以通过浏览器模拟设备，而不是缩小窗口。在Chrome上检查代码（Ctrl + Shift + I），然后选择切换设备工具栏。这将允许您模拟设置大小的默认设备。希望这对你来说是一个好的开始

Answer 2

有很多设备在屏幕分辨率方面有很多种。如果你使用Bootstrap（BS），最好只关注他们的媒体查询在一些关键断点中的样式，请注意BS库使用移动优先方法，因此大多数情况下你会看到@mdia min-width。请参阅下面的BS的SCSS代码。

＆＃13;

// Small screen / tablet
$screen-sm:                  768px !default;
$screen-sm-min:              $screen-sm !default;

// Medium screen / desktop
$screen-md:                  992px !default;
$screen-md-min:              $screen-md !default;

// Large screen / wide desktop
$screen-lg:                  1200px !default;
$screen-lg-min:              $screen-lg !default;

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

＆＃13;

更多信息，here

响应式设计 - 精确的移动/平板/平板电脑设备尺寸

2 个答案: