Question

运行响应式单页应用程序，存在带有内容的框对象。这些旨在具有背景图像。但是，对于手持设备，随着盒子的宽度和高度比例的变化，方向性成为一个问题。

检测设备和视口大小并不是基于统一程序的任务。在我看来，假设用户使用的是相对较新的浏览器，那么CSS3和调用@media screen and (orientation:landscape)是最安全的选择。

假定图像将同时在水平和垂直版本中进行裁剪，并且使用无方向编码的标签

<div class="box" style='background:  url("https://somewhere.amazonaws.com/general-purpose-images/splash.jpg") no-repeat fixed; background-size: 100% 100%; background-attachment: scroll;'>

如何根据方向有效切换？

Answer 1

设置带有图片类的div

<div class="img_a">

然后根据可能需要实现的方向或any other media queries定义所需图像的CSS规则

@media screen and (orientation: portrait)
  { div.img_a 
      { background: url(https://[...]img_a.jpg) no-repeat fixed; }
  [...] }
@media screen and (orientation: landscape)
  { div.img_a 
      { background: url(https://[...]img_a_horizontal.jpg) no-repeat fixed; }
  [...] }

检测设备方向

1 个答案: