así que creé un sitio web que tiene imágenes, múltiples cuadros de texto, etc., algunos porcentajes de usuarios y algunos usan píxeles, quiero decir que usan eso para estar en el lugar específico allí en este momento. Entonces, si conecta su computadora portátil a un televisor y coloca el sitio web, se ampliará automáticamente a la perfección, solo hace que las cosas se vean un poco borrosas pero todo está en su lugar. Me preguntaba cómo puedo agregar una función para mi sitio web que selecciona todo en la página y simplemente lo reduce o lo expande según el tamaño de la pantalla, no me importa si se vuelve borroso después de reducirlo o expandirlo. O si alguien tiene alguna otra idea sobre cómo puedo hacer que todo encaje en la página, sin importar el tamaño de la pantalla, sería muy útil.
En primer lugar, hay varias formas de hacer que un sitio responda, la forma más fácil son las consultas de medios:
@media only screen and (max-width: 600px) { body { background: #fff; } } @media only screen and (min-width: 601px) { body { background: #ccc; } }Esto también se puede aplicar a diferentes hojas de estilo:
<link rel="stylesheet" type="text/css" href="/styles/gardener_main.css" media="screen"/> <link rel="stylesheet" type="text/css" href="/styles/additional.css" media="screen"/> <link rel="stylesheet" type="text/css" href="/styles/gardener_800.css" media="screen and (min-width: 800px)"/> <link rel="stylesheet" type="text/css" href="/styles/gardener_799.css" media="screen and (max-width: 799px)"/>Básicamente le están diciendo a los dispositivos qué estilos usar para qué tamaño de pantalla.
Para empezar, puede trabajar con esto: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
para obtener una mejor comprensión de la consulta de medios en sí.
¡Pero! La mayoría de alguna manera tiende a olvidar que también necesita ajustar su html:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />Según la cantidad de dispositivos y la cantidad de dispositivos antiguos que desee admitir, también puede agregar un interruptor que básicamente reemplaza todo:
<?php $mobrowser = '0'; if (preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone|android)/i', strtolower($_SERVER['HTTP_USER_AGENT']))) { $mobrowser++; }if ((strpos(strtolower($_SERVER['HTTP_ACCEPT']),'application/vnd.wap.xhtml+xml') > 0) or ((isset($_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE'])))) {$mobile_browser++;} $mobile_ua = strtolower(substr($_SERVER['HTTP_USER_AGENT'], 0, 4)); $mobile_agents = array( 'w3c ','acs-','alav','alca','amoi','audi','avan','benq','bird','blac', 'blaz','brew','cell','cldc','cmd-','dang','doco','eric','hipt','inno', 'ipaq','java','jigs','kddi','keji','leno','lg-c','lg-d','lg-g','lge-', 'maui','maxo','midp','mits','mmef','mobi','mot-','moto','mwbp','nec-', 'newt','noki','oper','palm','pana','pant','phil','play','port','prox', 'qwap','sage','sams','sany','sch-','sec-','send','seri','sgh-','shar', 'sie-','siem','smal','smar','sony','sph-','symb','t-mo','teli','tim-', 'tosh','tsm-','upg1','upsi','vk-v','voda','wap-','wapa','wapi','wapp', 'wapr','webc','winw','winw','xda ','xda-'); if (in_array($mobile_ua,$mobile_agents)) {$mobrowser++;} if (strpos(strtolower($_SERVER['ALL_HTTP']),'OperaMini') > 0) {$mobrowser++;} if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']),'windows') > 0) {$mobrowser = 0;} if ($mobrowser > 0) { echo ' HTML old mobile devices etc '; } else { echo ' HTML desktop '; }?>Con este enorme algo, puedes agarrar a los agentes móviles, pero esas cosas solo son interesantes si realmente quieres admitir dispositivos históricos.
Tal vez podría intentar agregar algo de css como @media screen y (min-width: 1240px) {...}
