Переключение между макетом веб-страницы (телефон / ноутбук) с помощью JavaScript, jquery, начальной загрузки

Question

У меня есть веб-страница с некоторыми элементами HTML с классами начальной загрузки.

<div class="col-xs-12 col-lg-4"></div>

Я хочу дать кнопку при нажатии, должен переключать видовой экран / изменение макета div на веб-странице. При нажатии этой кнопки я смогу увидеть в реальном времени изменение макета и триггер начальной загрузки "col-xs-12" для мобильного просмотра и "col-lg-4" для ноутбука. Я не знаю, какое свойство css или bootstrap или html я ищу.

Любая помощь будет высоко ценится.

РЕДАКТИРОВАТЬ - Вариант использования - Я предоставляю пользователю экран для редактирования CSS и классов. Я хочу дать пользователю кнопку переключения, чтобы он мог видеть, как будут выглядеть его элементы в виде ноутбука и мобильного телефона.

Answer 1

Как обсуждается здесь , медиазапросы может определять только ширину устройства , а не ширину элемента .

Лучше всего будет использовать JavaScript-оболочку, такую ​​как CSS Element Queries , которая добавляет поддержку медиа-запросов на основе элементов для всех новых браузеров (IE7 +).

Как указано в официальных документах полифилла Документы , Запросы элементов CSS не только позволяет определять медиа-запросы на основе размера окна, но также добавляет функциональность «медиа-запросов» в зависимости от на размер элемента (поддерживается любой селектор), не вызывая задержки производительности из-за реализации на основе событий.

---

Проверьте это JSFiddle или фрагмент кода ниже, чтобы увидеть, как этот полифилл добавляет новые атрибуты элемента с селектором атрибута ~= для элемента DOM в зависимости от на ваш фактический CSS и размер элемента:

/* CSS */

.widget-name h2 {
    font-size: 12px;
}

.widget-name[min-width~="400px"] h2 {
    font-size: 18px;
}

.widget-name[min-width~="600px"] h2 {
    padding: 55px;
    text-align: center;
    font-size: 24px;
}

.widget-name[min-width~="700px"] h2 {
    font-size: 34px;
    color: red;
}

<!-- HTML -->

<script src="https://combinatronics.com/marcj/css-element-queries/master/src/ResizeSensor.js"></script>
<script src="https://combinatronics.com/marcj/css-element-queries/master/src/ElementQueries.js"></script>

<div class="widget-name">
  <h2>Element responsiveness FTW!</h2>
</div>

Answer 2

Сначала вы создаете iframe и загружаете контент вашего сайта в iframe асинхронно.

<iframe id="media-simulator" class="embed-responsive-item"></iframe>

<script>
$(document).ready(function(){
    $('#media-simulator').load('/includes/main-page.html');
})
<script>

Медиа-запросы, определенные в Bootstrap, будут чувствительны к ширине iframe. Поэтому вы можете определить ширину, которую вы хотите смоделировать, в своем коде CSS, а затем добавить эти классы с помощью jQuery к вашему iframe:

.xs {
  width: 375px;
}

.sm {
   width: 576px
}

.md {
   width: 768px
}

.lg { 
   width: 992px
}

.xl {
   width: 1200px
}

И, наконец, напишите обработчики щелчков для ваших кнопок, чтобы переключать требуемый класс, например обработчик события для переключения мобильного предварительного просмотра:

$('.button-xs').click(function() {
  $('#media-simulator').removeClass('sm');
  $('#media-simulator').removeClass('md');
  $('#media-simulator').removeClass('lg');
  $('#media-simulator').removeClass('xl');

  $('#media-simulator').addClass('xs');
})

Answer 3

Я думаю, вам нужен симулятор для переключения вида сайта. попробуйте, я думаю, что это должно работать для вас: скрипка

HTML:

<button type="button" id="toggle_btn">
   Toggle Viewport
</button>
<span id="span">Desktop View</span>
<hr />
<section class="iframe_holder">
  <iframe src="https://getbootstrap.com/" id="dup_viewPort"></iframe>
</section>

JS:

var isToggled = false;
$('#toggle_btn').click(function() {
  if (!isToggled) {
    $('#dup_viewPort').animate({
      width: '375px'
    }, function() {
      isToggled = true;
      $('#span').text('Mobile View');
    });
  } else {
    $('#dup_viewPort').animate({
      width: '100%'
    }, function() {
      isToggled = false;
      $('#span').text('Desktop View');
    });
  }
})

CSS:

#dup_viewPort {
  width: 100%;
  position: relative;
  height: 100%;
  border: 0;
}

Answer 4

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

Вы дадите элемент (ы), который хотите изменить, своего рода идентификатора; идентификатор или класс, который вы можете выбрать его. Дайте ему только один из классов (например, только col-lg-4), затем выберите его и переключите классы. Это даст ему или то или другое в данный момент времени. Сделайте кнопку, чтобы запустить ее из функции, и вам нужно идти.

<button onclick='changeLayout()'>Change Layout</button>

function changeLayout() {
  var myDiv = document.getElementById('myDiv');
  myDiv.classList.toggle('col-lg-4');
  myDiv.classList.toggle('col-xs-12');
}

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

Надеюсь, это поможет! Если я неправильно понял ваш вопрос, прошу прощения, может быть, вы можете помочь прояснить еще немного.