0

嗨，我正在使用媒体查询开发响应式网页。

在这里，我需要检查许多设备，例如具有不同最小和最大宽度的智能手机、平板电脑。

例如 ：

/* Smartphones (portrait and landscape) ----------- */
   @media only screen 
   and (min-device-width : 320px) 
   and (max-device-width : 480px) {
    /* Styles */
       }

  /* Desktops and laptops ----------- */
   @media only screen 
   and (min-width : 1224px) {
     /* Styles */
    }

如您所见，我需要检查不同的宽度。

所以我正在寻找的是，我可以在浏览器中找到任何选项，我可以提供自定义的最小和最大宽度，所以我可以把我的设计放在那个宽度并根据我的需要安排？

4

6 回答 6

1

使用 Chrome，您可以在检查元素 ctrl+shift+I 下，然后在右下角的齿轮按钮上，在 ovverides 菜单下，您可以启用许多测试值，从设备指标到 css 媒体（屏幕、打印）的仿真等等上。

链接到谷歌的解释。

于 2013-11-14T10:55:49.983 回答
0

您可以使用responsivetest.net（也可以使用您的本地项目），或者从github下载

于 2013-11-14T10:59:16.700 回答
0

最新版本的 Firefox内置了响应式设计视图Ctrl + Shift + M。在 Windows 上，热键是，或访问 Firefox 菜单 > Web 开发人员 > 响应式设计视图。

在 Internet Explorer 中，您可以按F12调出开发人员工具，然后访问工具 > 调整大小并选择窗口大小或输入自定义大小。

于 2013-11-14T11:00:06.763 回答
0

我使用screenfly测试我的网站

于 2013-11-14T10:51:02.457 回答
0 
/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

并使用波纹

于 2013-11-14T10:52:17.823 回答
0

您可以编写一个 JavaScript 函数，在 body 标签 onload 事件中执行，使用 jQuery 的内置函数检查屏幕宽度和大小：width() 和 height() 来检查 body 元素的大小。

然后使用 if 语句，您可以使用这个 jQuery 函数加载不同的样式表。

例子

$("body").load(function() { $("link[rel=stylesheet]").attr({href : "style2.css"}); });

我还没有测试过它，但它应该可以解决问题。

于 2013-11-14T11:04:38.930 回答