Cambiar estilos según resolución de página

[elpetakas]

Sé que existen varias formas de hacerlo, me pregunto cuál será la mejor de todas, me pregunto si existirá alguna forma usando css a ser posible: quiero que el ancho de mi página, además de otros parámetros cambien según la resolución de la página:

1. Si la resolución tiene 1152px de ancho o superior:
------- width: 100%; (Ancho de página)
2. Si el ancho de resolución es inferior a 1152px:
------- width: 1007px; (Ancho de página)

[Ribon]

Eso último lo logras con porcentajes y anchos minimos

Código CSS:

element{
width:100%;
min-width:1007px;
}
 

Saludos.

[IsaBelM]

en principio puedes usar width y min-width. también puedes hacerlo con javascript. para obtener el ancho de la resolución de la pantalla, has de usar la propiedad screen.width. para cambiar una propiedad

[sauljps]

Hola! Eso se llama Responsive Design, que no se cual seria una buena traduccion al español jaja

Es que la página se adapte al navegador, eso se hace con Media Queries de CSS

Te pongo por ejemplo el código aqui

Código CSS:

@media only screen and (min-width: 1152px) {
  /* Aqui pones los estilos de la página */
 
}
 

Es MUY util, y es la mejor manera de hacerlo

[elpetakas]

muchisimas gracias! habéis sido de gran ayuda para mi! ahora me toca investigar :)

[IsaBelM]

Iniciado por sauljps

Hola! Eso se llama Responsive Design, que no se cual seria una buena traduccion al español jaja

por desgracia no es soportado por ie8-. para lograrlo en esas versiones de ie, habría que usar javascript como dije anteriormente. bien sea para eliminar y crear una regla (como es el código que expuse) o cambiar el href del link

[elpetakas]

Iniciado por IsaBelM

por desgracia no es soportado por ie8-. para lograrlo en esas versiones de ie, habría que usar javascript como dije anteriormente. bien sea para eliminar y crear una regla (como es el código que expuse) o cambiar el href del link

Muchas gracias por el apunte, lo hice todo así, con esta línea:

<link href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template?>/css/mini.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 1151px)"/>

Pero claro llego a IE8 y... decepción, ¿Qué tal si lo intento de la siguiente forma?

Código:

<link href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template?>/css/mini.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 1151px)"/>


<?php if (isIe6() || isIe7() || isIE8()) :?>
/*Codigo Javascript para cambiar propiedades*/
	<?php endif; ?>

Igual es un poco lioso pero por aprovechar un poco ¿como lo veis? ¿Demasiado enrevesado? Yo creo que es bastante correcto y la página estaría optimizada ya que así solamente utilizaría código JavaScript mientras sea necesario

PD:
Esa línea me incluye resoluciones inferiores a 1152, ¿No existe una línea más correcta de poner "only screen and (max-width: 1151px)" para que sea algo asi como si screen <= 1152?

[IsaBelM]

creo que tu planteamiento es erróneo. el problema está en que ie8- no interpretará el incliude y por lo tanto tampoco el cambio de propiedad. se me ocurre que una vez que tengas verificado que el navegador es ie8-, cambies, con js, el atributo media del include y la propiedad

un ejemplo tosco para ser probado en ie8

<link href="estilo.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 1280px)"/>

<script type="text/javascript">
function fnc() {
if (screen.width == 1280) {
var diana = document.getElementsByTagName('link')[0];
diana.media = 'all';
}
}

window.onload = function() {fnc()};

[_cronos2]

<link href="estilo.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 1280px)"/>

<script type="text/javascript">
function fnc() {
if (screen.width == 1280) {
var diana = document.getElementsByTagName('link')[0];
diana.media = 'all';
}
}

window.onload = function() {fnc()};

Posible optimización

<link href="estilo.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 1280px)"/>

<script type="text/javascript">
function fnc() {
if (screen.width <= 1280) { // <= por si acaso, ¿no?
var diana = document.getElementsByTagName('link')[0];
diana.media = 'all';
}
}

window.onload = fnc; // Me gusta más usar el handler a secas XD

PD: Yo también creo que debería comprobar con PHP el navegador para no usar código para nada.
Saludos (:

[IsaBelM]

creo que no hay diferencia entre usar una función de referencia o una expresión de función, pues que ambas formas son una manera antigua de registrar un evento

[_cronos2]

No, diferencia no hay, por eso puse que a mí me gustaba más de esa manera Siempre lo vi más legible, pero esto es como todo, cada uno lo pone como le parece.
Saludos (:

[elpetakas]

Eu muito feliz! Funciona y me habéis ahorrado el darme cabezazos dando demasiadas vueltas! Estou muito grato, gracias a todos