масштабирование макета HTML

Question

Предположим, у меня есть html div (или некоторый такой элемент) с различными вложенными элементами. Я хочу, чтобы иметь возможность проектировать мой макет, используя позиционирование пикселей и размеры пикселей (не проценты), а затем масштабировать полученный пользовательский интерфейс, чтобы соответствовать экрану (сохраняя его соотношение сторон).

Итак, мой вопрос в том, как я могу увеличить произвольный элемент html и его детей, сохраняя при этом их макет?

Вот пример пользовательского интерфейса, который я мог бы расширить масштабы: http://jsfiddle.net/8dodovmn/2/

<div id="myUI" style="width:400px; height:300px; background-color:blue; position:relative;">  
    <div style="border:1px solid red; position:absolute;left:100px; top: 100px; width:100px; height:100px; text-align:center;"> 
     <button style="height:50px; margin-top:20px;">Submit</button> 
    </div> 
</div> 

шкала CSS преобразования казалось хорошей идеей, но это не работает: http://jsfiddle.net/Lqozzpmg/1/ Компоновка элементов не сохраняется.

#myUI 
{ 
    -webkit-transform: scale(2); /* Doesn't work, though it seems like it should. Layout of nested elements is not maintained */ 
} 

Answer 1

Try добавление содержащего элемент таким образом, #myUI элемент может быть расположен по отношению к нему, а затем изменить ваш CSS чуть-чуть. See fiddle here или текст ниже

HTML

<div id="box"> 
    <div id="myUI" style="width:400px; height:300px; background-color:blue; position:relative;"> 
     <div style="border:1px solid red; position:absolute;left:100px; top: 100px; width:100px; height:100px; text-align:center;"> 
      <button style="height:50px; margin-top:20px;">Submit</button> 
     </div> 
    </div> 
</div> 

CSS КОД

#box { 
    width:50vw; 
    height:50vh; 
    text-align:center; 
} 
#myUI { 
    transform: translateY(-50%); 
    -webkit-transform:translateY(-50%); 
    top:50%; 
    transform: scale(2); 
    /* Doesn't work, though it seems like it should. Layout of nested elements is not maintained */ 
    transform-origin: 0%; 
} 

Как вы можете себе представить, #box размер для демонстрационных целей, вы можете использовать все, что вы хотите. Вам также не нужно использовать размеры видовых экранов, я просто использовал их, чтобы показать не так часто используемую меру CSS, но опять же используйте то, что вам нравится