Question

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

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

例如：

/* 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 */
    }

在这里，你可以看到，我需要检查不同的宽度。

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

Answer 1

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

link to explanation on google.

Answer 2

我使用screenfly

测试我的网站

Answer 3

/* 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 */
}

并使用涟漪

Answer 4

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

Answer 5

最新版本的Firefox内置Responsive Design View。在Windows上，热键为Ctrl + Shift + M，或访问Firefox菜单＆gt; Web开发人员＆gt;响应式设计视图。

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

Answer 6

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

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

实施例

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

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

如何将浏览器屏幕大小更改为自定义大小？

6 个答案: