[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Адаптивный дизайн CSS
savelikan
Привет всем! ВОт интересует вопрос по оптимизации сайта для мобильно устройства.
С помощью CSS можно сделать вот так: media screen and (max-width: 900px) {}
Но если устройство с экраном 5" будет иметь разрешение 1920*1080 будет отображатся обычная версия сайта...
Что вы посоветуете в даном случае?

_____________
Одесса - мой город!)))
Kusss
<head>
<meta
http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta
name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta
name="format-detection" content="telephone=no">

</head>
sergeiss
Цитата (savelikan @ 14.02.2017 - 15:38)
Но если устройство с экраном 5" будет иметь разрешение 1920*1080 будет отображатся обычная версия сайта...
Что вы посоветуете в даном случае?

Используй media правильно http://htmlbook.ru/css/value/media
Например, делаешь верстку одинаковую и для монитора, и для мобилы (при больших разрешениях). Но используя media=handheld устанавливаешь, например, чуть больший размер шрифта.
Сделать это не сложно smile.gif Просто выставляешь для body некий "базовый" размер шрифта, например 12px, а для все остальных элементов (или для большей их части) делаешь его в относительных единицах "em". Тогда за счет одного только изменения базового размера шрифта в 14px (или больше) ты увеличиваешь все тексты, не трогая размеры элементов (их ширину). Если изначально это продумать, то будет работать "как часы".

Таким образом ты сможешь сделать разную верстку не только для разных размеров устройств, но и для разных типов устройств. Можно даже вообще разную верстку сделать для мобилы и для компа, даже при одинаковой их ширине. Но это, моё сугубое мнение, уже будет полный изврат.

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

user posted image
sergeiss
Помогли советы или как?

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

user posted image
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.