元视口-如何在PC和移动设备上以相同方式显示div的背景？
RGS
我的页面中有meta视口：
<meta name="viewport" content="width=device-width, initial-scale=1">
还有一个div中的背景图片，我想在计算机和移动设备上以相同的方式显示该图片。问题是，在移动设备上，它比计算机大得多，如下图所示：
#mydiv{
width:100%;
height:150px;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
background-image:url(myurl.jpg);
}
任何想法如何在不删除元视口的情况下div在计算机和移动设备上具有相同的背景大小？
莱金76
您可以将移动高度设置为较小。
@media (min-width: 400px) and (max-width: 768px) {
#mydiv{
height:75px;
}
}
您可以设置任意多个尺寸，以覆盖许多尺寸的屏幕。请记住，并非所有计算机屏幕的尺寸都相同。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
移动设备上的视口元标记问题
- 2
元视口无法在iPad上缩放网站
- 3
Div 比视口更宽
- 4
元视口和宽度=设备宽度与尺寸百分比
- 5
响应式设计中的字体大小和元视口
- 6
视口居中 <div> 对齐
- 7
字体和视口libgdx
- 8
srcset和视口宽度
- 9
字体和视口libgdx
- 10
如何动态设置视口？
- 11
在移动设备上当前视口的中心显示div
- 12
如何在每次单击按钮时增加/减少视口元值（初始比例，最大比例或最小比例）？
- 13
使固定宽度适合移动设备视口
- 14
Android Chrome大字体错误/缩放错误/元视图视口设备宽度不起作用
- 15
视口高度元标记
- 16
视口高度元标记
- 17
在触摸设备上平移视口
- 18
如何获得设备的宽度（不是视口）？
- 19
如何实现FabricJS画布视口的移动？
- 20
禁用移动设备上的缩放以固定视口大小
- 21
网站在移动设备上呈现视口
- 22
页面超出了移动设备上的视口
- 23
在移动设备上滚动时，视口高度使闪烁闪烁
- 24
基于设备的不同<meta>视口缩放？
- 25
如果视口是移动的，则删除脚本
- 26
移动键盘调整视口大小
- 27
在显示之前获取QScrollArea视口的大小
- 28
在视口滚动时显示元素
- 29
在更改div宽度时更改视口
我来说两句