如何为手机屏幕重新定位照片
[英]How to reposition photos for mobile screens
问题描述
I have learned how to reposition by <style>@media screen and (max-width:800px) but I dont know how to reposition photos.
我已经学会了如何通过<style>@media screen and (max-width:800px)重新定位，但我不知道如何重新定位照片。
On a wide computer screen, I have a group of photos on the right side but on a mobile screen, I want the photos to be at the top.在宽大的电脑屏幕上，我在右侧有一组照片，但在手机屏幕上，我希望照片位于顶部。
I also have created a page for mobile screens and maybe I could redirect mobile users to that page but I don't know how to do that.我还为移动屏幕创建了一个页面，也许我可以将移动用户重定向到该页面，但我不知道该怎么做。
I don't want the computer screen pages viewed by mobile devices and the mobile screen pages viewed by computers.我不想要移动设备查看的电脑屏幕页面和电脑查看的移动屏幕页面。
My style of CSS is not in accordance with the protocol, however, I find my style much easier to follow and easier to correct mistakes.我的风格 CSS 不符合协议，但是，我发现我的风格更容易遵循，更容易纠正错误。
This is the coding for the background and one photo for a widescreen.这是背景的编码和宽屏的一张照片。 When the screen is narrowed the background repositions the way I want but the photo remains in the original place and is too small.当屏幕变窄时，背景会按照我想要的方式重新定位，但照片仍然在原来的位置并且太小了。
<?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>
This is the coding for one photo for a narrow screen.这是用于窄屏幕的一张照片的编码。 Which is how I want the coding above to look like when the screen is narrowed.当屏幕变窄时，我希望上面的编码看起来像这样。
<?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>
It would be OK to reposition the photo with Javascript if CSS wont fix the problem.如果 CSS 无法解决问题，则可以使用 Javascript 重新定位照片。
Can anybody help?有人可以帮忙吗？
UPDATE更新
Thanks for your input Garth Baker.感谢您的意见加思贝克。 This is one of many variations I've tried and nothing works so I need your version of where the coding should be placed.这是我尝试过的许多变体之一，但没有任何效果，所以我需要您的编码应该放置在哪里的版本。
<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>
2 个解决方案
解决方案1
1 2019-10-18 15:51:45
Use this.用这个。 It will allow you two dynamically adjust your content based on whether or not your screen is below 1023px or above 1024px.它将允许你们两个根据您的屏幕是低于 1023 像素还是高于 1024 像素来动态调整内容。 The class will do as it says. class 会按照它说的做。 Only display on desktop.仅在桌面上显示。 or only display on mobile.或仅在移动设备上显示。 wherever you add the classes they will work.无论您在哪里添加它们都可以使用的类。 :) :)
You really shouldn't use inline styles.你真的不应该使用内联 styles。 But anyways.但无论如何。 Just wrap in the style tags.只需包装样式标签。 Press F12 and you will get your developer console that will allow you to view the mobile version.按 F12，您将获得允许您查看移动版本的开发人员控制台。
<style>
@media screen and (max-width: 1023px) {
.only-desktop{
display:none;
}
}
@media screen and (min-width: 1024px) {
.only-mobile{
display:none;
}
}
</style>
解决方案2
0 2019-10-18 15:57:27
first I would just like to suggest that you don't use inline CSS, just create a CSS script and link it to the DOM.首先，我只是建议您不要使用内联 CSS，只需创建一个 CSS 脚本并将其链接到 DOM。 take a look at bootstrap as it uses grids and then with the @media stuff you pages will be more responsive.看看引导程序，因为它使用网格，然后使用 @media 内容，您的页面将更具响应性。
解决方案3
0 2019-10-21 19:00:48
This is the answer:-这是答案：-
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.