媒体查询正在运行,但与它们应有的方式相反
Media Queries are working but the reverse to how they should
我已经尝试了一段时间来构建一个网站,该网站可以在所有小于平板电脑的设备上以横向模式进行修复,但这确实令人头疼。我不知道我在做什么,或者我做错了什么。
我认为我的媒体查询全错了。我需要网站以纵向模式开始,但在移动设备上查看时,它会固定为横向模式。经过多次修补,我几乎可以正常工作了,但是它走错了路!在桌面上它是横向模式,然后在移动设备上它是纵向模式!笑死我了!哈哈
这是我尝试让这段代码工作的 livelink。有人可以告诉我为什么这段代码不起作用吗?如果您调整浏览器的大小,您会自己发现问题所在。
下面是我的代码。
CSS
body, html {
margin: 0; padding: 0; height: 100%; overflow: hidden;
}
#content {
position:absolute;
left: 0;
right: 0;
bottom: 0;
top: 0px;
top: -15px;
min-height: 100%;
min-width: 100%;
}
html, body {
height: 100%;
min-height: 100%;
}
@media screen and (min-aspect-ratio: 2/1) {
body {
transform: rotate(90deg);
transform-origin: 50% 50%;
}
}
HTML
<div id="content">
<iframe src="//fast.wistia.net/embed/iframe/qnca9gdlv5?videoFoam=true" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width="640" height="388"></iframe><script src="//fast.wistia.net/assets/external/E-v1.js"> </script>
</div>
更新
我现在已经在较小的调整大小的桌面浏览器上更正了旋转,但是在移动设备上仍然没有旋转。
@media (max-width: 600px)
body {
transform: rotate(90deg);
transform-origin: 50% 50%;
}
上面css是改变body的高度和宽度
例如:通常
-----40px-----
|
|
|
100px
|
|
|
旋转90度变成
-----100px-----
|
|
|
40px
|
|
|
这个css一定有用
@media (max-width: 600px)
iframe {
transform: rotate(90deg);
/* transform-origin: 50% 50%; */
width: 100vw!important;
height: 100vh!important;
}
我已经尝试了一段时间来构建一个网站,该网站可以在所有小于平板电脑的设备上以横向模式进行修复,但这确实令人头疼。我不知道我在做什么,或者我做错了什么。
我认为我的媒体查询全错了。我需要网站以纵向模式开始,但在移动设备上查看时,它会固定为横向模式。经过多次修补,我几乎可以正常工作了,但是它走错了路!在桌面上它是横向模式,然后在移动设备上它是纵向模式!笑死我了!哈哈
这是我尝试让这段代码工作的 livelink。有人可以告诉我为什么这段代码不起作用吗?如果您调整浏览器的大小,您会自己发现问题所在。
下面是我的代码。
CSS
body, html {
margin: 0; padding: 0; height: 100%; overflow: hidden;
}
#content {
position:absolute;
left: 0;
right: 0;
bottom: 0;
top: 0px;
top: -15px;
min-height: 100%;
min-width: 100%;
}
html, body {
height: 100%;
min-height: 100%;
}
@media screen and (min-aspect-ratio: 2/1) {
body {
transform: rotate(90deg);
transform-origin: 50% 50%;
}
}
HTML
<div id="content">
<iframe src="//fast.wistia.net/embed/iframe/qnca9gdlv5?videoFoam=true" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width="640" height="388"></iframe><script src="//fast.wistia.net/assets/external/E-v1.js"> </script>
</div>
更新
我现在已经在较小的调整大小的桌面浏览器上更正了旋转,但是在移动设备上仍然没有旋转。
@media (max-width: 600px)
body {
transform: rotate(90deg);
transform-origin: 50% 50%;
}
上面css是改变body的高度和宽度
例如:通常
-----40px-----
|
|
|
100px
|
|
|
旋转90度变成
-----100px-----
|
|
|
40px
|
|
|
这个css一定有用
@media (max-width: 600px)
iframe {
transform: rotate(90deg);
/* transform-origin: 50% 50%; */
width: 100vw!important;
height: 100vh!important;
}