Как разработать сайт для отображения сетчатки?
Мне нужно разработать адаптивный веб-сайт с 4 дизайнами [настольный, мобильный, планшетный и сетчатый дисплей].
Первые три хороши и могут быть сделаны, но сетчатка отображает новое. Так что будет очень полезно, если кто-нибудь сможет поделиться правильным способом разработки HTML для него.
Любой плагин Jquery, Hack of HTML/CSS будет полезен! Большое спасибо!
3 ответа
Вы можете использовать несколько CSS фреймворков, таких как
и искать адаптивный веб-дизайн в Google
Для Retina Display и Mobile layout используйте Медиа-запросы
Вот ссылка на CSS-трюки, которые будут полезны Css-трюкам
Всякий раз, когда я создаю сайт, я использую retina.js. Он автоматически заменяет изображения с более низким разрешением на вашей странице высоким разрешением на вашем сервере, если у пользователя есть дисплей сетчатки.
На iPhone/iPad iOS достаточно умна, чтобы все выглядело хорошо без какой-либо помощи с вашей стороны. Хотя я не пробовал, я уверен, что OSX также делает то же самое для настольных компьютеров / ноутбуков с Retina.
Тем не менее, есть пара вещей, которые вы обязательно должны учитывать /user:
Используйте векторную графику, чтобы избежать размытых изображений (поскольку у Retina более высокий PPI, он должен масштабировать растровую графику)
Сохраняйте страницы легкими и быстрыми (общее хорошее правило для мобильных устройств)
CSS Media запросы (общее хорошее правило для адаптивной разработки)
познакомиться с
-webkit
собственные свойства CSS с префиксом, которые дают детальный контроль над многими вещами.Тестируйте часто! Большую часть времени я приятно удивлен тем, насколько хорошо все "просто работает" (и как хорошо они выглядят при высоком PPI), но это не всегда работает так, как вы ожидаете.