Cómo crear una interfaz de tamaño variable en CSS3

Cómo crear una interfaz de tamaño variable en CSS3 - Dummies

La gran variedad y tipos de pantallas utilizadas para mostrar información hacen necesario que sus comandos CSS3 le permitan al usuario cambiar el tamaño de los elementos necesario. En la mayoría de los casos, puede simplemente permitir que el usuario haga el elemento de cualquier tamaño. Sin embargo, puede haber situaciones en las que necesite controlar la cantidad de cambio de tamaño para que pueda adaptar el contenido para satisfacer las necesidades del contenedor.

El siguiente ejemplo muestra cómo cambiar el tamaño de un objeto y controlar su tamaño. (Puede encontrar el código completo para este ejemplo en la carpeta CapítuloInteracciones del código descargable como ResizeContent. HTML.)

 $ (function () {$ ("# ResizeMe"). Resizable ({minWidth: 200, minHeight: 60, resize: function (event, ui) {$ ("# Content") html ("Ancho:" + tamaño de ui. ancho + "
alto:" + ui, tamaño, alto);}});});

Este ejemplo es interesante porque muestra cómo establecer propiedades y responder a eventos. En este caso, las propiedades minWidth y minHeight mantienen el elemento con un tamaño mínimo específico: el usuario no puede hacer que el elemento sea más pequeño.

El código también responde al evento de cambio de tamaño. Hay un requisito especial para cambiar el tamaño que necesita saber. El contenedor de cambio de tamaño está separado del elemento de contenido. Aquí está el HTML de este ejemplo:

 

Párrafo de tamaño variable

El estilo asociado, #ResizeMe, proporciona un borde alrededor de, establece el alto y el ancho de inicio y centra el contenido en el contenedor.

Cuando desee escribir contenido en la pantalla, debe usar el elemento de contenido, no el elemento contenedor. De lo contrario, los controladores de tamaño desaparecerán y el usuario no podrá cambiar el tamaño del elemento después de la primera vez. En este caso, el tamaño actual del contenedor aparece como parte del objeto ui pasado al controlador de eventos de cambio de tamaño.

Usted accede a la información a través del tamaño. ancho y tamaño propiedades de altura, como se muestra en el código.