Масштабирование HTML/CSS для установки различных мониторов, возможно ли это?

Я знаю, что SVG поддерживает это. Но мне интересно, можно ли масштабировать HTML/CSS вверх и вниз, например изображение, подходящее для разных мониторов? Например, подумайте о мобильном приложении на основе мобильного телефона на основе HTML5, которое просто «работает» на многих экранах разного размера с iPhone (3,4s, 5 и т. Д.), Android и т. Д. И множестве размеров экрана.Масштабирование HTML/CSS для установки различных мониторов, возможно ли это?

Я не говорю об использовании процентной ширины, например, 100% или 20% в пределах div, em для шрифтов или нескольких медиа-запросов. Я бы хотел использовать абсолютную ширину/высоту в своих div, потому что это легче программировать.

Например, предположим, что я создаю приложение шириной 400 пикселей и высотой 600 пикселей, и все внутри этого div (кнопки, больше divs, images и т. Д.) Также используют высоты пикселей и ширину и позиционирование.

Теперь, есть способ просто «масштабировать» эту вещь до любого разрешения, которое я хочу, как изображение? Вид так же, как окружающие его

<scaleToDevice> 
<div style='width:400px;height:600px'> 
    ... All my other UI here, like buttons, etc would use absolute positioning with pixels 
</div> 
</scaleToDevice>

и было бы «просто работать» думать как, как масштабировать изображение в Photoshop. Кроме того, это будет просто HTML/CSS, масштабируется до 100% ширины и высоты устройства, и приложение останется интерактивным.

источник

2014-09-24 foreyez

Возможно, вам необходимо использовать свойство CSS transform. Однако имейте в виду, что вам понадобится математика, потому что вам нужно иметь в виду ориентацию, а также соотношение сторон экрана. Но хорошо, если вы хотите это сделать, вы можете это сделать. Вот код, я дал другому пользователю, который вы можете использовать в качестве отправной точки:

#body { 
    width:100vw; 
    height:100vh; 
    text-align:center; 
} 
#content { 
    transform: translateY(-50%); 
    -webkit-transform:translateY(-50%); 
    top:50%; 
    transform: scale(2); 
    transform-origin: 0%; 
}

Это также делает масштаб элемента расти от центра (который будет выглядеть лучше, например, на мобильных телефонах, если вы вращающиеся взгляды . Вы также можете добавлять переходы для более плавного эффекта). Так что продолжайте, попробуйте. Но есть причина, по которой никто не делает этого: усилия не стоят окончательного результата, вы всегда будете нуждаться в тонкой настройке

источник

2014-09-24 05:09:10 Devin

да .. это похоже на «альтернативное» решение esp с css-преобразованиями. Я предполагаю, что большинство просто использует проценты divs и медиа-запросы для разных устройств? – foreyez

Это не «альтернатива», это, пожалуй, единственный способ сделать то, что вы хотите, как вы заявили об этом. В противном случае мы говорим о регулярных элементах автоматической настройки, независимо от того, используете ли вы проценты (не работает для шрифтов) или как использовать размеры видовых экранов, которые вы можете использовать с шрифтами. Вы также можете использовать решения jQuery, но, как и ваш вопрос, я не думаю, что вы можете пойти гораздо дальше, чем CSS-преобразования и размеры видовых экранов – Devin

спасибо. есть еще одна вещь, которую я видел много, что-то с или другим, я все еще исследую, может ли она решить мою проблему. – foreyez

Вы хотите посмотреть, как использовать свойства width/height (vw/vh).

http://snook.ca/archives/html_and_css/vm-vh-units

Таким образом, вы можете базировать все ширина/высота/размеры (в CSS) от этих свойств оч.сл., Vh, и с правильной математике вы весь сайт может масштабироваться вверх и вниз изменение размеров окно.

источник

2014-09-24 04:52:43 Alex

Это интересно, я посмотрю подробнее. – foreyez

Масштабирование HTML/CSS для установки различных мониторов, возможно ли это?

ответ

Смежные вопросы