我学会了如何重新定位 <style>@media screen and (max-width:800px)但我不知道如何重新定位照片。
在宽屏计算机屏幕上，我在右侧有一组照片，但在移动屏幕上，我希望照片位于顶部。
我还为移动屏幕创建了一个页面，也许我可以将移动用户重定向到该页面，但我不知道该怎么做。
我不希望手机看的电脑屏幕页面和电脑看的手机屏幕页面。
我的 CSS 风格不符合协议(protocol)，但是，我发现我的风格更容易遵循，也更容易纠正错误。
这是背景编码和一张宽屏照片。当屏幕变窄时，背景会按照我想要的方式重新定位，但照片仍留在原来的位置并且太小了。
<?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 重新定位照片。
有人可以帮忙吗？
更新
感谢您对 Garth Baker 的投入。这是我尝试过的众多变体之一，但没有任何效果，所以我需要您提供的关于编码位置的版本。
<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>
最佳答案
使用这个。它将允许你们两个根据您的屏幕是低于 1023 像素还是高于 1024 像素动态调整您的内容。类(class)会按照它说的去做。仅显示在桌面上。或仅在手机上显示。无论您在哪里添加类(class)，它们都会起作用。 :)
你真的不应该使用内联样式。但无论如何。只需包裹样式标签即可。按 F12，您将获得允许您查看移动版本的开发人员控制台。
<style>
@media screen and (max-width: 1023px) {
.only-desktop{
display:none;
}
}
@media screen and (min-width: 1024px) {
.only-mobile{
display:none;
}
}
</style>
关于javascript - 如何为手机屏幕重新定位照片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58454197/