{"id":322,"date":"2012-02-01T13:53:04","date_gmt":"2012-02-01T17:53:04","guid":{"rendered":"http:\/\/blogviejo.sld.cu\/violeta\/?p=322"},"modified":"2012-02-01T13:53:04","modified_gmt":"2012-02-01T17:53:04","slug":"ancho-maximo-y-minimo","status":"publish","type":"post","link":"https:\/\/blogs.sld.cu\/violeta\/2012\/02\/01\/ancho-maximo-y-minimo\/","title":{"rendered":"Ancho m\u00e1ximo y m\u00ednimo"},"content":{"rendered":"

M\u00cdNIMO<\/strong>
\nPor defecto, los elementos de bloque ocupan toda el ancho disponible en el elemento que los contiene. De esta forma, si se reduce el tama\u00f1o de la ventana del navegador, el sitio disponible disminuye y el ancho de los elementos de bloque es menor. Si se utiliza la propiedad min-width, se puede forzar a que un elemento s\u00f3lo reduzca su ancho hasta cierto l\u00edmite, a partir del cual su ancho ya no disminuye.<\/p>\n

En el siguiente ejemplo, los dos <div> ocupan todo el sitio disponible en cada momento. Si se reduce el tama\u00f1o de la ventana del navegador, los dos <div> reducen su tama\u00f1o para adaptarse al nuevo sitio disponible.<\/p>\n

No obstante, el segundo <div> tiene establecida un ancho m\u00ednimo mediante min-width: 500px, de modo que a partir de ese valor, el <div> no reduce aunque el sitio disponible siga reduci\u00e9ndose. Por lo tanto, si se reduce mucho el tama\u00f1o de la ventana del navegador, aparece <\/strong>una barra <\/strong>de scroll horizontal<\/strong>.
\nLa propiedad min-width no admite valores negativos y los valores en porcentaje toman como referencia el del elemento contenedor.<\/p>\n

El navegador IE 6 no incluye esta propiedad, por lo que se debe utilizar un truco que hace uso de CSS y JavaScript para simular el comportamiento de la propiedad min-width:
\n#contenedor {
\nmin-width: 300px;
\nwidth: expression(document.body.clientWidth < 301? “300px”: “auto” );<\/strong>
\n}
\nEl ejemplo anterior hace uso de una funci\u00f3n llamada expression()\u00a0 que s\u00f3lo funciona en los navegadores de tipo IE (desde su versi\u00f3n 5). Esta funci\u00f3n permite establecer una medida utilizando expresiones matem\u00e1ticas o mediante c\u00f3digo JavaScript.<\/p>\n

En este caso, se utiliza JavaScript para establecer de forma din\u00e1mica el ancho del elemento #contenedor. Si la p\u00e1gina (obtenida mediante document.body.clientWidth) es menor que 301px, se establece su ancho a 300px. En cualquier otro caso, se deja que el navegador calcule autom\u00e1ticamente el ancho necesario mediante el valor auto.<\/p>\n

El principal inconveniente de utilizar la funci\u00f3n expression() es que el c\u00f3digo CSS resultante no es v\u00e1lido seg\u00fan el est\u00e1ndar oficial y por tanto, no supera satisfatoriamente el proceso de validaci\u00f3n de herramientas como el validador de CSS del W3C<\/strong><\/p>\n

***********************************************************************
\nPor otra parte, establecer medidas mediante operaciones matem\u00e1ticas puede resultar muy \u00fatil para tener un control preciso cuando se utilizan unidades como em y porcentajes. Por este motivo, la futura versi\u00f3n CSS 3<\/strong> incluir\u00e1 una funci\u00f3n llamada calc() <\/strong>cuyo funcionamiento es id\u00e9ntico a expression().<\/p>\n

El siguiente ejemplo muestra el uso de calc() para establecer la anchura de un elemento mediante una operaci\u00f3n matem\u00e1tica compleja:<\/p>\n

#contenedor {
\nfloat: left;
\nmargin: 1em;
\nborder: solid 1px;
\nwidth: calc(100%\/3 – 2*1em – 2*1px);<\/strong>
\n}<\/p>\n

El ancho del elemento #contenedor anterior se establece a una tercera parte del sitio disponible (100%\/3) y despu\u00e9s se le resta el sitio que ocupan los dos m\u00e1rgenes laterales de 1em de anchura cada uno (2*1em) y el espacio ocupado por los dos bordes laterales de 1px de anchura cada uno (2*1px).<\/p>\n

MAXIMO<\/strong>
\nEn ocasiones, puede ser \u00fatil no establecer de forma expl\u00edcita el ancho de los elementos pero s\u00ed fijar un ancho m\u00e1ximo. En el siguiente ejemplo, el primer <div> no tiene establecida la propiedad max-width por lo que su ancho ocupa todo el espacio disponible en el elemento que lo contiene.<\/p>\n

Sin embargo, el segundo <div> tiene establecida un ancho m\u00e1ximo mediante max-width: 400px. Si se reduce el tama\u00f1o de la ventana del navegador, los dos <div> reducen su tama\u00f1o para adaptarse al nuevo sitio disponible. Sin embargo, al aumentar el tama\u00f1o de la ventana del navegador, el primer <div> ocupa todo el sitio disponible y el segundo <div> no crece m\u00e1s all\u00e1 de los 400px establecidos.
\nLa propiedad max-width no admite valores negativos, los valores en porcentaje toman como referencia el del elemento contenedor y el valor none se puede utilizar para no limitar el ancho m\u00e1ximo de un elemento.<\/p>\n

Uno de los usos t\u00edpicos de max-width es el de limitar el ancho m\u00e1ximo de las p\u00e1ginas web. Con el uso de pantallas y resoluciones cada vez mayores, se complica la creaci\u00f3n de p\u00e1ginas web cuya ancho se adapta din\u00e1micamente. El siguiente ejemplo establece el ancho de la p\u00e1gina al 95% del tama\u00f1o de la ventana del navegador:<\/p>\n

#contenedor {
\nwidth: 95%;
\n}<\/p>\n

Si se visualiza la p\u00e1gina anterior en una pantalla con una resoluci\u00f3n muy grande, seguramente su aspecto ser\u00e1 demasiado diferente al dise\u00f1o original de la p\u00e1gina. En estos casos, se suele mantener el ancho adaptable a la<\/p>\n

ventana del navegador, pero se limita su ancho m\u00e1ximo:<\/p>\n

#contenedor {
\nwidth: 95%;
\nmax-width: 1200px;
\n}<\/p>\n

El navegador Internet Explorer 6 no incluye esta propiedad, por lo que se debe utilizar un truco que hace uso de CSS y JavaScript para simular el comportamiento de la propiedad max-width:<\/p>\n

#contenedor {
\nmax-width: 1200px;
\nwidth: expression(document.body.clientWidth > 1201? “1200px”: “auto”);<\/strong>
\n}<\/p>\n

El ejemplo anterior hace uso de una funci\u00f3n llamada expression() que s\u00f3lo funciona en los navegadores de tipo Internet Explorer (desde su versi\u00f3n 5). Esta funci\u00f3n permite establecer una medida utilizando expresiones matem\u00e1ticas o mediante c\u00f3digo JavaScript.<\/p>\n

En este caso, se utiliza JavaScript para establecer de forma din\u00e1mica el ancho del elemento #contenedor. Si el ancho de la p\u00e1gina (obtenida mediante document.body.clientWidth) es mayor que 1201px, se establece su ancho a 1200px. En cualquier otro caso, se deja que el navegador calcule autom\u00e1ticamente el ancho necesario mediante el valor auto.<\/p>\n

El principal inconveniente de utilizar la funci\u00f3n expression() es que el c\u00f3digo CSS resultante no es v\u00e1lido seg\u00fan el est\u00e1ndar oficial y por tanto, no supera satisfatoriamente el proceso de validaci\u00f3n de herramientas como el validador de CSS del W3C<\/strong><\/p>\n

Por otra parte, establecer medidas mediante operaciones matem\u00e1ticas puede resultar muy \u00fatil para tener un control preciso cuando se utilizan unidades como em y porcentajes. Por este motivo, la futura versi\u00f3n CSS 3 incluir\u00e1 una funci\u00f3n llamada calc() cuyo funcionamiento es id\u00e9ntico a expression().<\/p>\n

El siguiente ejemplo muestra el uso de calc() para establecer la anchura de un elemento mediante una operaci\u00f3n matem\u00e1tica compleja:<\/p>\n

#contenedor {
\nfloat: left;
\nmargin: 1em; border: solid 1px;
\nwidth: calc(100%\/3 – 2*1em – 2*1px);<\/strong>
\n}<\/p>\n

El ancho del elemento #contenedor anterior se establece a una tercera parte del sitio disponible (100%\/3) y despu\u00e9s se le resta el sitio que ocupan los dos m\u00e1rgenes laterales de 1em de ancho cada uno (2*1em) y el espacio ocupado por los dos bordes laterales de 1px de ancho cada uno (2*1px).<\/p>\n

AMBOS<\/strong><\/p>\n

El c\u00f3digo:<\/p>\n

<style type=”text\/css”>
\n#minimo{
\nborder:#000 solid 1px;
\nbackground:#cff;
\nmin-width:600px;<\/strong>
\n max-width:1000px;<\/strong>
\nheight:200px;
\n}
\n<\/style><\/p>\n

El c\u00f3digo para IE 6-:<\/strong><\/em><\/p>\n

Desafortunadamente, nuestro buen amigo Internet Explorer 6 y menor, desconoc\u00eda las propiedades min-width y max-width, por lo que tendremos que agregar un truco especial para que simule las mismas propiedades, quedando de la siguiente forma:<\/p>\n

#minimo{
\nwidth:expression(<\/strong><\/em>
\n (document.documentElement.clientWidth < 600)? “600px” :<\/strong><\/em>
\n (document.documentElement.clientWidth > 1000)? “1000px” :<\/strong><\/em>
\n “auto” );<\/strong><\/em>}<\/p>\n","protected":false},"excerpt":{"rendered":"

Expresi\u00f3n: width:expression(
\n(document.documentElement.clientWidth 1000)? “1000px” :
\n“auto” );<\/p>\n","protected":false},"author":112,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[9],"tags":[],"_links":{"self":[{"href":"https:\/\/blogs.sld.cu\/violeta\/wp-json\/wp\/v2\/posts\/322"}],"collection":[{"href":"https:\/\/blogs.sld.cu\/violeta\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.sld.cu\/violeta\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.sld.cu\/violeta\/wp-json\/wp\/v2\/users\/112"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.sld.cu\/violeta\/wp-json\/wp\/v2\/comments?post=322"}],"version-history":[{"count":0,"href":"https:\/\/blogs.sld.cu\/violeta\/wp-json\/wp\/v2\/posts\/322\/revisions"}],"wp:attachment":[{"href":"https:\/\/blogs.sld.cu\/violeta\/wp-json\/wp\/v2\/media?parent=322"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.sld.cu\/violeta\/wp-json\/wp\/v2\/categories?post=322"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.sld.cu\/violeta\/wp-json\/wp\/v2\/tags?post=322"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}