Мобильное веб-приложение: использование одного и того же набора изображений на устройствах с различным разрешением

Question

Мобильное веб-приложение: использование одного и того же набора изображений на устройствах с различным разрешением

0

Я хотел бы знать, могу ли я сохранить один файл CSS для своего мобильного веб-приложения. Веб-приложение предназначено для разного разрешения устройств Android. Поэтому я хотел бы знать, могу ли я использовать один и тот же набор изображений и масштабировать его, используя любые стили CSS, вместо того, чтобы хранить несколько изображений для каждого разрешения? Webapp построен с использованием html5, css3 и javascript.

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

Это возможно? пожалуйста, дай мне знать.

Заранее спасибо. Цените любую помощь.

user2733130 18 дек. 2013, в 10:31

Источник

Теги:

javascript

jquery

html

android

css3

1 ответ

Ещё вопросы

Cracker0dks · Answer 1 · 2013-12-18T06-55-00.000Z

Вы можете сделать что-то вроде этого:

@media screen and (max-width: 480px){
  .element { background-image: url(../images/bg1.img); }
}

@media screen and (min-width: 800px){
 .element { background-image: url(../images/bg2.img); }
}

но вы также можете установить его на 100% (если он должен соответствовать экрану любого размера)

Привет, я хотел бы знать, можем ли мы использовать одно и то же изображение для обоих устройств: максимальная: ширина 480 пикселей и минимальная ширина: 800 пикселей? В вышеприведенном посте я вижу два изображения bg1 и bg2. Могу ли я использовать только 1 изображение для обоих?
Да, конечно! Вы можете изменить только размер с помощью $ ("img"). css ("width", "100px");
Это не работает, так как высота также будет отличаться.
высота автоматически масштабируется ... или если вы хотите $ ("img"). css ({"width": "100px", "height": "10px"});