texto - Cómo escribir diferentes HTML para diferentes tamaños de pantalla

responsive css @media

Question

Entendí cómo cambio CSS a través de consultas de medios (como media = "screen and (max-width: 640px)")

pero digamos que quiero escribir (solo por ejemplo)

<div>
[if screen resolution is lower then 960 px]
    <div>
    some new text only for lower resolution
    </div>
[end of condition]
</div>

¿Cuál es la condición que necesito para escribir para hacerlo bien?

Answer 1

Debe asignar una identificación (o una clase o cualquier otra forma de encontrar su elemento de CSS) a la <div> y luego puede establecer una definición de consulta de medios como esta:

<div id="mydiv">...</div>
<style type="text/css">
@media screen and (min-width: 961px) {
   div#mydiv { display: none }
}
</style>

O para una mejor legibilidad: hágalo oculto por defecto y visible si max-width: 960px .

Answer 2

Podría estar equivocado, pero creo que la selección de css por resolución necesitaría un poco de ayuda de javascript.

Aquí hay un ejemplo rápido de cómo podría verse ese js, incrustado en jquery:

$(document).ready(function() {

  if ((screen.width>=1024) && (screen.height>=768)) {
   alert(''Screen size: 1024x768 or larger'');  
   $("link[rel=stylesheet]:not(:first)").attr({href : "detect1024.css"});
 }
  else  {
    alert(''Screen size: less than 1024x768, 800x600 maybe?'');
    $("link[rel=stylesheet]:not(:first)").attr({href : "detect800.css"});
  }
});

Espero que ayude.

Answer 3

Por lo que he experimentado, no puede hacer consultas de medios dentro de páginas HTML. Debes hacerlo desde tu CSS.

Pero si quiere mostrar algún texto especial solo cuando está por debajo de una resolución determinada, ¿por qué no solo lo hace visible cuando la resolución es inferior a 960px?

La creación de diseños receptivos es muy diferente de un diseño regular, porque tienes que pensar mucho más (lo que es difícil)

Answer 4

puedes verificarlo mediante el uso de un objeto de pantalla de JavaScript:

screen.width 

o puedes hacer esto con css

<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />

http://css-tricks.com/6206-resolution-specific-stylesheets/ http://www.javascriptkit.com/howto/newtech3.shtml

Answer 5

Puede agregar la función jQuery para cambiar el estilo dinámicamente según la resolución de la pantalla.

if(screen.width==1600)
       { 
        jQuery(''#hb-gotop'').removeAttr("margin-left", "-0.9");
        jQuery(''#hb-gotop'').attr(''style'', ''margin-left: -0.7%'');
       }
        else if(screen.width==1280)
       { 
        jQuery(''#hb-gotop'').removeAttr("margin-left", "-0.9");
        jQuery(''#hb-gotop'').attr(''style'', ''margin-left: -0.9%'');
       }    
       else if(screen.width==1024)
       { 
        jQuery(''#hb-gotop'').removeAttr("margin-left","-0.9");
        jQuery(''#hb-gotop'').attr(''style'', ''margin-left: -1.1%'');
       }
        else if(screen.width==800)
        { 
        jQuery(''#hb-gotop'').removeAttr("margin-left","-0.9");
        jQuery(''#hb-gotop'').attr(''style'', ''margin-left: -1.3%'');
       }

Answer 6

Answere fue útil de:

si la resolución de la pantalla es menor que x, añada css

Puedes hacer esto completamente con CSS 3 usando el comando @media.

**@media (max-width:960px) { css... } //nothing with screen size bigger than 960px

@media (min-width: 960px) {css ...} // nada con un tamaño de pantalla inferior a 960px **

Jason Whitted hace un buen punto, esto es solo CSS 3, por lo que no funcionará con navegadores más antiguos (sin embargo, debería funcionar con todos los navegadores modernos). También puedes editar la pantalla o el dispositivo

@media pantalla {.nomobile {display: bloque; }} // escritorios / portátiles

@media handheld {.nomobile {display: none; }} // dispositivos móviles O puede suponer que los dispositivos móviles tendrán un ancho menor, y continúen.