1
我使用Firefox和Chrome开发响应式网页。在两种浏览器上，当屏幕尺寸小于770像素时，我已将CSS更改为向左浮动。两种响应模式都允许我确认它的行为如预测的那样，只在该尺寸以下浮动到左侧。为什么firefox/chrome响应仿真和智能手机之间的区别？
但是当我使用我的5英寸（720 x 1280）屏幕华为P8时，元素不会左移。
SCSS
@include bp(max-width, 770px) {
.products-list .price {
float: left;
}
CSS
@media only screen and (max-width: 770px)
.products-list .price {
float: left;
}
HTML
<ul class="products-list">
<li class="items">
<div class="product-info">
<div class="left-product">
<div class="price">
<span class="reg-price">
<span class="price">$1000</span>
为什么会变成这样？
你能显示你的代码吗？ – makshh
像素比例？ https://css-tricks.com/snippets/css/retina-display-media-query/ - 还有，什么设备？另外，你是否使用任何CSS来确保你的媒体查询失败？ （例如，显示/隐藏770尺寸的元素，或放置明显的边框等）？最后 - 取决于你的CSS和标记。请将它缩小到相关位，而不是整个页面！ –
你正在使用哪种设备？为了确保不是缓存问题，请尝试使用适用于移动设备的Chrome浏览器（适用于Android）或Safari（适用于iOS），通过USB检查移动浏览器。这发生在我身上很多。当我检查设备时，有时页面正在使用旧的缓存样式表。 –