我正在使用 Firefox 和 Chrome 开发响应式网页。在这两种浏览器上,我更改了 css,以便在屏幕尺寸低于 770px 时将元素向左浮动。它们的两种响应模式都允许我确认它的行为符合预期,仅在该尺寸以下向左浮动。
但是当我使用 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>
为什么会这样?
最佳答案
为确保不是缓存问题,请尝试使用 Chrome(适用于 Android)或 Safari(适用于 iOS)通过 USB 为移动设备内置的检查器来检查移动浏览器。这种情况在我身上经常发生。当我检查设备时,有时页面正在使用旧的缓存样式表。
https://developers.google.com/web/tools/chrome-devtools/debug/remote-debugging/remote-debugging
关于css - 为什么 Firefox/Chrome 响应式仿真和智能手机之间存在差异?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38254624/