O que cambia

Teña en conta a falta do <meta name="viewport" content="width=device-width, initial-scale=1">, que desactiva o aspecto de zoom dos sitios en dispositivos móbiles. Ademais, restablecemos o ancho do noso contedor e cambiamos a barra de navegación para evitar o colapso e, basicamente, estamos listos.

Respecto ás barras de navegación

Como aviso, o compoñente da barra de navegación é bastante complicado porque os estilos para mostralo son bastante específicos e detallados. Anulacións para garantir que a visualización dos estilos de escritorio non sexa tan eficiente ou elegante como se desexa. Só ten en conta que pode haber problemas potenciales mentres creas este exemplo ao usar a barra de navegación.

Navegadores, desprazamento e elementos fixos

Os deseños que non responden destacan un inconveniente fundamental dos elementos fixos. Calquera compoñente fixo, como unha barra de navegación fixa, non poderá desprazarse cando a ventana gráfica se faga máis estreita que o contido da páxina. Noutras palabras, tendo en conta o ancho do contenedor que non responde de 970 píxeles e unha ventana gráfica de 800 píxeles, pode ocultar 170 píxeles de contido.

Non hai forma de evitar isto xa que é o comportamento predeterminado do navegador. A única solución é un deseño responsivo ou usar un elemento non fixo.

Sistema de reixa non sensible

Un terzo
Un terzo
Un terzo