CSS3 Responsive Layout - какой метод я могу выбрать?

Question

Привет, я делаю сайт, на этом сайте есть 3 разных макета для рабочего стола, планшетов, смартфонов. Я могу определить ширину с помощью response.js.

Но я спрашиваю, как я могу переключить дизайн на соответствующие устройства. я могу изменить ширину и высоту, используя селекторы запросов, но как я могу изменить содержимое страницы ..

любая хорошая идея. Ранее я загружал все содержимое и скрывал нежелательный контент с помощью дисплея: нет, я знаю, что это неправильно. Какой путь лучше, чем поиск кода на стороне сервера?

спасибо

Answer 1

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

Если вы строите с использованием PHP, посмотрите этот потрясающий скрипт.

Использование примерно так:

if($isMobile){
   header('Location: http://m.youdomain.com/' . urlencode($_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']));
   exit();
}

Также проверьте Switcher

Answer 2

Создайте темы дизайна для всех ваших типов макетов и используйте те же классы CSS в своей разметке. Проверьте размер окна на стороне клиента и на основе окна загрузите соответствующую тему.