如何为手机屏幕重新定位照片

Question

我已经学会了如何通过<style>@media screen and (max-width:800px)重新定位，但我不知道如何重新定位照片。

在宽大的电脑屏幕上，我在右侧有一组照片，但在手机屏幕上，我希望照片位于顶部。

我还为移动屏幕创建了一个页面，也许我可以将移动用户重定向到该页面，但我不知道该怎么做。

我不想要移动设备查看的电脑屏幕页面和电脑查看的移动屏幕页面。

我的风格 CSS 不符合协议，但是，我发现我的风格更容易遵循，更容易纠正错误。

这是背景的编码和宽屏的一张照片。 当屏幕变窄时，背景会按照我想要的方式重新定位，但照片仍然在原来的位置并且太小了。

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<style type="text/css"> .images { position: absolute; height: 77%; width: 39%; right: 2.5%; bottom: 6.8%; top: 16%; background-color: #98FF98; } </style>
    <div class="images"></div>  <!--If this line is deleted the background does not appear-->
<style>@media screen and (max-width:800px) { .images { position: absolute; height: 47%; width: 96%; left: 2%; top: 16%; background-color: #98FF98; } }</style>  <!--This line works good when screen is narrowed-->
    <div class="images"></div>  <!--This line does nothing and doesnt need to be there-->

<style type="text/css"> .pha { position: absolute; width: 6%; right: 8.2%; top: 18.5%; } </style>
    <div class="pha"><img alt="Photo" src = "/img/soda.jpg" style="width:160%;" ></div>
<style>@media screen and (max-width:800px) { .pha { position: absolute; width: 6%; left: 7.2%; top: 17%; } }</style> <!--All this line does is deletes the photo when the screen is narrowed-->
    <div class="pha"><img alt="Photo" src = "/img/soda.jpg" style="width:285%;" ></div> <!--This line does not reposition the photo when the screen is narrowed-->

</body>
</html>

这是用于窄屏幕的一张照片的编码。 当屏幕变窄时，我希望上面的编码看起来像这样。

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<style type="text/css"> .images { position: absolute; height: 77%; width: 39%; right: 2.5%; bottom: 6.8%; top: 16%; background-color: #98FF98; } </style>
    <div class="images"></div>
<style type="text/css"> .phb { position: absolute; width: 6%; left: 7.2%; top: 17%; } </style>
    <div class="phb"><img alt="Photo" src = "/img/soda.jpg" style="width:285%;" ></div>

</body>
</html>

如果 CSS 无法解决问题，则可以使用 Javascript 重新定位照片。

有人可以帮忙吗？

更新

感谢您的意见加思贝克。 这是我尝试过的许多变体之一，但没有任何效果，所以我需要您的编码应该放置在哪里的版本。

<style>
@media screen and (max-width: 1023px) {
  .only-desktop{
    display:none;
  }
    .phb{
      position: absolute;
        width: 6%;
          left: 7.2%;
            top: 17%;
              }
              {
img alt="Photo"
  src = "/img/soda.jpg"
    style="width:285%;" 
}}
@media screen and (min-width: 1024px) {
  .only-mobile{
    display:none;
  }
   .pha{
    position: absolute;
      width: 6%;
        right: 8.2%;
          top: 18.5%;
            }
            {
img alt="Photo"
  src = "/img/soda.jpg"
    style="width:160%;"
}}
</style>

Answer 1

用这个。 它将允许你们两个根据您的屏幕是低于 1023 像素还是高于 1024 像素来动态调整内容。 class 会按照它说的做。 仅在桌面上显示。 或仅在移动设备上显示。 无论您在哪里添加它们都可以使用的类。 :)

你真的不应该使用内联 styles。 但无论如何。 只需包装样式标签。 按 F12，您将获得允许您查看移动版本的开发人员控制台。

<style>
@media screen and (max-width: 1023px) {
  .only-desktop{
    display:none;
  }
}
@media screen and (min-width: 1024px) {
  .only-mobile{
    display:none;
  }
}
</style>

Answer 2

首先，我只是建议您不要使用内联 CSS，只需创建一个 CSS 脚本并将其链接到 DOM。 看看引导程序，因为它使用网格，然后使用 @media 内容，您的页面将更具响应性。

Answer 3

这是答案：-

<style type="text/css"> .images { position: absolute; height: 77%; width: 39%; right: 2.5%; bottom: 6.8%; top: 16%; background-color: #98FF98; }</style>
    <div class="images"></div>
<style>@media screen and (max-width:800px) { .images { position: absolute; height: 47%; width: 96%; left: 2%; top: 16%; background-color: #98FF98; } }</style>

<style type="text/css"> .pha { position: absolute; width: 10%; right: 8.2%; top: 18.5%; } </style>
<style>@media screen and (max-width: 800px) { .pha { position: absolute; width: 20%; left: 7.2%; top: 17%; } } </style>
    <div class="pha"><img alt="Photo" src = "/img/soda.jpg" style="width:100%;" ></div>

如何为手机屏幕重新定位照片

问题描述

2 个解决方案

解决方案1
1 2019-10-18 15:51:45

解决方案2
0 2019-10-18 15:57:27

解决方案3
0 2019-10-21 19:00:48

如何为手机屏幕重新定位照片

问题描述

2 个解决方案

解决方案1 1 2019-10-18 15:51:45

解决方案2 0 2019-10-18 15:57:27

解决方案3 0 2019-10-21 19:00:48

解决方案1
1 2019-10-18 15:51:45

解决方案2
0 2019-10-18 15:57:27

解决方案3
0 2019-10-21 19:00:48