it-swarm-es.com

ancho de página web sensible min?

En mi experiencia, los sitios web más receptivos no tienen anchos mínimos, por lo que cuando se redimensiona a un tamaño pequeño (digamos una ventana de 100px) el contenido se arruina y se vuelve ilegible.

ejemplo: http://alistapart.com/article/responsive-web-design

Me encanta la flexibilidad de RWD, pero generalmente implemento un ancho mínimo en mis sitios, ya que no me gusta la presentación del sitio cuando es demasiado pequeña. Muchos sitios que no responden le permiten desplazarse y me preguntaba si sería un buen compromiso tener un ancho mínimo y si afecta la usabilidad en absoluto. ejemplos https://theartofdining.co.uk/

30
benbyford

El diseño web siempre ha consistido en elegir una audiencia que le interese. Podrías cuidado sobre cada navegador en uso y confiar en el conjunto mínimo de funcionalidades comunes o usar técnicas de mejora progresiva/degradación elegante para aprovechar la funcionalidad moderna donde esté disponible. El enfoque posterior requiere muchos recursos.

Personalmente, solo me preocupan los dispositivos con 320px de ancho o más. En cierto sentido, no me importan mucho los dispositivos más pequeños, aunque espero que los sitios que hago tengan alguna funcionalidad (posiblemente reducida) en cada navegador.

30
obelia

Primero: Puede tener un gran sitio receptivo cargado con anchos mínimos o anchos máximos o incluso mezclarlos en la misma regla de medios. Las personas tienen diferentes enfoques cuando escriben una hoja de estilo receptiva.

Tener todas sus consultas de medios escritas con:

@media screen and (min-width : 320px) {
}
@media screen and (min-width: 680px) {
}
@media creen and (min-width : 1024px) {
}

Significa que este CSS se aplicará si el área de visualización es mayor que 320, 680 y 1024 respectivamente.

Aunque si tienes:

@media screen and (max-width: 320px) {
}
@media screen and (max-width: 680px) {
}
@media screen and (max-width: 1024px) {
}

Significa que este CSS se aplicará si el área de visualización es menor que 320, 680 y 1024.

Segundo: Incluso puedes tener una consulta de medios más específica que diga:

@media screen and (min-width: 680px) and (max-width: 1024px) {
}

que establece: si el área de visualización está entre 680 px y 1024 px, se aplicarán esos estilos.

En resumen, si no ve muchos sitios web con consultas de medios de ancho mínimo, no significa que no funcionen tan bien como los de ancho máximo. Lo hacen, tal vez la persona que escribió el bit de respuesta se sintió más cómoda usando max-width.

10
António Regadas

Ya sea que afecte o no la usabilidad, depende de su audiencia, el dispositivo que están usando y lo que haya decidido para un ancho mínimo.

La mayoría de los teléfonos inteligentes le permiten desplazarse y hacer zoom, por lo que es posible que desee establecer su ancho mínimo en el ancho más bajo que no obstaculice su contenido. Sin embargo, todo el propósito del diseño receptivo es poder cambiar su diseño en diferentes anchos, lo que le permite ajustar el contenido. Debería poder encontrar alguna solución de diseño para casi todos los tamaños, a menos que imágenes o gráficos grandes sean parte de su contenido.

De cualquier manera, generalmente no me preocupo demasiado por anchos inferiores a 320px, y parece que tampoco lo hacen la mayoría de los diseñadores web.

2
Eric