Responsive design 媒体查询是否可以在不刷新浏览器的情况下从横向视图更改为纵向视图?

Responsive design 媒体查询是否可以在不刷新浏览器的情况下从横向视图更改为纵向视图?,responsive-design,media-queries,landscape-portrait,Responsive Design,Media Queries,Landscape Portrait,你好,我有个问题,希望有人能帮我。我试着找一些关于这个的话题,但没有任何对我有帮助的 我尝试进行媒体查询,我希望他们在不刷新浏览器的情况下,在iPhone、iPad等上从横向视图更改为纵向视图-而且它还必须在pc浏览器上工作 试过 @媒体 仅屏幕和(最小宽度:240px)和(最大宽度:520px), 仅屏幕和(最小设备宽度:240px)和(最大设备宽度:520px){…} 有可能吗?我尝试了很多东西,现在站着不动,希望有人能帮我解决这个问题。媒体查询会对方向的变化做出反应 他们基于它应用样式,不

你好,我有个问题,希望有人能帮我。我试着找一些关于这个的话题,但没有任何对我有帮助的

我尝试进行媒体查询,我希望他们在不刷新浏览器的情况下,在iPhone、iPad等上从横向视图更改为纵向视图-而且它还必须在pc浏览器上工作

试过

@媒体 仅屏幕和(最小宽度:240px)和(最大宽度:520px), 仅屏幕和(最小设备宽度:240px)和(最大设备宽度:520px){…}


有可能吗?我尝试了很多东西,现在站着不动,希望有人能帮我解决这个问题。

媒体查询会对方向的变化做出反应 他们基于它应用样式,不,他们不会刷新你的页面

以下是媒体查询列表

@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 */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* 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 (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

谢谢,但当我使用min device width时,浏览器会忽略媒体查询使用手机或模拟器进行测试?使用手机,但我在查询中使用min width,它可以工作,但我仍然需要不同的设备和浏览器规则,因此浏览器不会使用设备规则。所以我能解决这个问题吗?如果我使用最小设备宽度和最大设备宽度,那么只有使用这些规则的设备。所以如果我使用min width和max,那么只有浏览器才能读取它?你知道我要去哪里吗?:-)-顺便说一句,通过纵向和横向视图,我解决了这个问题,谢谢:-)我不明白你的问题..你是在问你是否使用
min device width
浏览器忽略这个查询?(如果这是您的问题-否)。
min-width
min-device-width
都由浏览器读取(不考虑设备)。min-width有点不同。请参考我的问题答案,但它们之间的区别是什么?