javascript — Как переместить фотографии на мобильные экраны

Как переместить фотографии на мобильные экраны

Я узнал, как изменить положение {amp}lt;style{amp}gt;@media screen and (max-width:800px) но я не знаю, как изменить положение фотографий.

На широком экране компьютера справа есть группа фотографий, но на экране мобильного устройства я хочу, чтобы фотографии были сверху.

Я также создал страницу для мобильных экранов и, возможно, я мог бы перенаправить мобильных пользователей на эту страницу, но я не знаю, как это сделать.

Я не хочу, чтобы страницы на экране компьютера просматривались мобильными устройствами, а страницы на экране мобильного устройства просматривались компьютерами.

Мой стиль CSS не соответствует протоколу, однако я считаю, что мой стиль намного легче следовать и легче исправлять ошибки.

Это кодировка для фона и одна фотография для широкоформатного экрана. Когда экран сужен, фон перемещается так, как я хочу, но фотография остается в исходном месте и слишком мала.

 {amp}lt;?php defined('BASEPATH') OR exit('No direct script access allowed'); ?{amp}gt; {amp}lt;!DOCTYPE html{amp}gt; {amp}lt;html{amp}gt; {amp}lt;head{amp}gt; {amp}lt;meta name="viewport" content="width=device-width, initial-scale=1.0"{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body{amp}gt; {amp}lt;style type="text/css"{amp}gt; .images { position: absolute; height: 77%; width: 39%; right: 2.5%; bottom: 6.8%; top: 16%; background-color: #98FF98; } {amp}lt;/style{amp}gt; {amp}lt;div class="images"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;!--If this line is deleted the background does not appear--{amp}gt; {amp}lt;style{amp}gt;@media screen and (max-width:800px) { .images { position: absolute; height: 47%; width: 96%; left: 2%; top: 16%; background-color: #98FF98; } }{amp}lt;/style{amp}gt; {amp}lt;!--This line works good when screen is narrowed--{amp}gt; {amp}lt;div class="images"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;!--This line does nothing and doesnt need to be there--{amp}gt; {amp}lt;style type="text/css"{amp}gt; .pha { position: absolute; width: 6%; right: 8.2%; top: 18.5%; } {amp}lt;/style{amp}gt; {amp}lt;div class="pha"{amp}gt;{amp}lt;img alt="Photo" src = "/img/soda.jpg" style="width:160%;" {amp}gt;{amp}lt;/div{amp}gt; {amp}lt;style{amp}gt;@media screen and (max-width:800px) { .pha { position: absolute; width: 6%; left: 7.2%; top: 17%; } }{amp}lt;/style{amp}gt; {amp}lt;!--All this line does is deletes the photo when the screen is narrowed--{amp}gt; {amp}lt;div class="pha"{amp}gt;{amp}lt;img alt="Photo" src = "/img/soda.jpg" style="width:285%;" {amp}gt;{amp}lt;/div{amp}gt; {amp}lt;!--This line does not reposition the photo when the screen is narrowed--{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;/html{amp}gt; 

Это кодировка одной фотографии для узкого экрана. Вот как я хочу, чтобы приведенная выше кодировка выглядела, когда экран сужен.

 {amp}lt;?php defined('BASEPATH') OR exit('No direct script access allowed'); ?{amp}gt; {amp}lt;!DOCTYPE html{amp}gt; {amp}lt;html{amp}gt; {amp}lt;head{amp}gt; {amp}lt;meta name="viewport" content="width=device-width, initial-scale=1.0"{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body{amp}gt; {amp}lt;style type="text/css"{amp}gt; .images { position: absolute; height: 77%; width: 39%; right: 2.5%; bottom: 6.8%; top: 16%; background-color: #98FF98; } {amp}lt;/style{amp}gt; {amp}lt;div class="images"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;style type="text/css"{amp}gt; .phb { position: absolute; width: 6%; left: 7.2%; top: 17%; } {amp}lt;/style{amp}gt; {amp}lt;div class="phb"{amp}gt;{amp}lt;img alt="Photo" src = "/img/soda.jpg" style="width:285%;" {amp}gt;{amp}lt;/div{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;/html{amp}gt; 

Было бы неплохо переместить фотографию с помощью Javascript, если CSS не решит проблему.

Кто-нибудь может помочь?

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector