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

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

您可以使用responsivetest.net（工作与当地的项目也是如此），或从github

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

测试我的网站，并透过Chrome中使用纹波

Answer 4

，你可以去下检查元素CTRL + SHIFT + I 然后在右下角齿轮按钮，下ovverides菜单中，可以启用许多测试值，从设备度量标准到css媒体仿真（屏幕，打印）等等。

link to explanation on google.

Answer 5

最新的Firefox版本下载它内置有一个Responsive Design View。在Windows热键为Ctrl + Shift + M，或访问Firefox菜单> Web开发人员>自适应设计视图。

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

Answer 6

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

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

例

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

我没有测试它，但它应该做的伎俩。