个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我目前正在为移动设备制作一个网站。在 style.css 中我得到了
#mobilepicture {
display: none;
}
#stockpicture {
float: left;
position: relative;
top: -65px;
left: 100px;
}
这是 mobile.css 的一部分:
#stockpicture {
display: none;
}
#mobilepicture {
...
}
当切换到 mobile.css 时，一切似乎都正常(显示 mobilepicture，stockpicture 显示:无)，直到我将手机倾斜到一边。当我这样做时，库存图片会更改以再次显示。我知道这是因为开头的选择器:
索引.php:
<link rel="stylesheet" type="text/css" href="mobile.css" media="screen and (max-width: 480px)" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen and (min-width: 481px)" />
<meta name="viewport" content="user-scalable=no, width=device-width" />
</head>
<!-- Head end-->
<!-- Body start-->
<body>
<!-- stockpicture-->
<div id="stockpicture">
<img src="images/stockpicture.png" alt="stockpicture"/>
</div>
<!-- stockpicture end-->
<!-- Start Container-->
<div class="container">
<!-- Content start -->
<div id="contentindex">
<!-- Mobile picture-->
<div id="mobilepicture">
<img src="images/mobilepicture.png" alt="mobilepicture" width="200" height="300"/>
</div>
<!-- Mobile end -->
<h2> Home </h2>
<p>Snippet.</p> </div>
<!-- end .container --></div>
还有什么办法可以解决吗？或者可能拒绝浏览器旋转？
干杯杰杰
最佳答案
您是否尝试过在媒体查询中添加方向？
/* Portrait */
@media screen and (max-width: 480px) and (orientation:portrait) {
/* Portrait styles */
}
/* Landscape */
@media screen and (max-width: 480px) and (orientation:landscape) {
/* Landscape styles */
}
编辑
好的，尝试将其全部剥离，这样您就可以看到哪些有效，哪些无效。一开始我会有一个包含多个媒体查询的样式表，因为这将有助于提高性能 - Single vs multiple stylesheets in responsive web design
然后将其全部剥离，并替换为一个简单的媒体查询，该媒体查询可以执行一些简单的操作，例如更改正文的背景颜色。
/* Portrait */
@media screen and (max-width: 640px) and (orientation:portrait) {
/* Portrait styles */
body {
background: yellow;
}
}
/* Landscape */
@media screen and (max-width: 640px) and (orientation:landscape) {
/* Landscape styles */
body {
background: red;
}
}
一旦您知道自己实际正确运行了媒体查询，您应该能够更轻松地进行故障排除。
关于html - 显示 :none when rotating smartphone，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9838235/
25
4
0
我有这部分代码将 div 围绕一个圆圈对齐: angle = 0; mangle = 0; for(i = 1; i<= count; i++) { $("#p" +i).css
为什么平衡得到一个AVL树的过程叫做旋转 ? (当你在它时，什么是 单 和 双 旋转？) 我的每一本教科书都公然使用这个词，没有任何解释。 最佳答案 这是在你的树的子树中改变根的操作，这是非常简单的操
作为进入处理的一个小作业，我必须编写一些代码才能获得以下内容: 使用 public void setup() { size(300,200); noFill(); rect(100,
我遇到了 Google Chrome 控制台报告的问题。我使用的是 Ubuntu 12.04。控制台中的问题是: Uncaught TypeError: Cannot read propert
在统一编辑器中，当我启用“Pivot”时，游戏对象将围绕“枢轴点”位置旋转，当我启用“Center”时，游戏对象将围绕“中心点”旋转 但是如果我使用脚本旋转，它总是围绕“中心点”旋转，例如，这是我的场
rotate() 算法会从左边选择序列的元素。它的工作机制如图 1 所示。 图 1 rotate()算法的工作方式(点此查看大图) 为了理解如何旋转序列，可以将序列中的元素想象成手镯上的珠子。rota
在三个JS中，是否可以用鼠标旋转对象而不是用OrbitControls.js旋转相机( https://threejs.org/docs/#examples/controls/OrbitControl
我正在学习 CSS 过渡和转换。这是 HTML: Transformatons and Transitions animate animate2 d
我们有一个图像，它似乎在旋转时消失了一秒钟。这个问题存在于 IE8 中，但在 IE9 和其他支持 HTML5 的浏览器中工作正常。我们使用了 jQuery 旋转插件。 HTML CSS #obj {
作为评估的一部分，我被赋予了这项任务......“‘旋转’按钮应该翻转元素的纵横比。” 为了完成这个，我定位了元素并切换了一个类名(旋转)，然后添加了这个 CSS... .main-inner.rot
我从 Unity 插件 Final IK 中看到了这行代码。 整个函数是这样的: //Limits rotation to a single degree of freedom (along axis
我正在尝试在动画关键帧内同时应用 -webkit-filter:hue-rotate() 和 -webkit-transform:rotate()。不幸的是，即使是 Chrome Canary 也无法
我正在尝试制作看起来像这样的波斯尼亚和黑塞哥维那国旗。 我正在努力实现星星的排列方式。它们位于 45 度倾斜轴上，但星星本身没有旋转。 以下是我正在尝试的最低限度代码，但它也会旋转星星。 有什么办法可
我正在尝试使用 ratcave for python 创建一个项目。但是当我导入 ratcave 时，出现以下错误: AttributeError: 'scipy.spatial.transform.
我正在尝试使用 ratcave for python 创建一个项目。但是当我导入 ratcave 时，出现以下错误: AttributeError: 'scipy.spatial.transform.
我的问题是我使用支持 CSS2 和 javascript 但不支持 css3 的 html 到 pdf 生成器 (acts_as_flying_saucer)，所以我不能使用 transform: r
我做了以下转换: // Translate my cube to origin myCubeModelMatrix = glm::translate( myCubeModelMatrix, vec3(
我正在将一些基于 PIL 的代码转换为 NumPy，但我发现 skimage.transform.rotate函数比 PIL 的 Image.rotate 慢显着。 作为一个粗略的比较，使用 skim
前言 .我知道过去曾多次问过这个问题，但没有一个解决方案实际上对我有用。自从提出类似问题(根据耗时过滤的 Google 搜索)以来，也已经有好几年了，因此大多数较旧的答案都已过时。如果有任何方法可以让
我试图将元素从其起始旋转点旋转 360 度，而不是从 0deg。例如，如果起点是 90deg，它会从 90deg 旋转到 90deg(整圈)。 我的目标是使用简单的@keyframes 动画来旋转元素
我是一名优秀的程序员,十分优秀！