Esta tradução está incompleta. Por favor, ajude a traduzir este artigo do Inglês.

As aplicações da Web responsivas utilizam tecnologias, tais como consultas de multimédia e viewport para se certificar que as suas UIs irão enquadrar qualquer fator de forma: pc, telemóvel, tablet, ou que quer que venha a seguir.

Guias núcleo

The building blocks of responsive design
Learn the basics of responsive design, an essential topic for modern app layout.
Mobile first
Often when creating responsive application layouts, it makes sense to create the mobile layout as the default, and build wider layouts on top.

Tecnologias

Tecnologia Descrição Resumo de suporte Últimas especificações
Media queries Defines expressions allowing styling to be selectively applied to content depending on viewport size, resolution, orientation, etc. Widespread across modern browsers (more detail) Media Queries Level 4
@viewport/viewport meta tag Controls viewport settings, primarily on mobile devices. @viewport: Experimental (more detail)
Viewport meta tag: Widespread across modern mobile devices
CSS Device Adaptation Module Level 1
Flexbox A very useful CSS feature for creating flexible, responsive layouts. Widespread across modern browsers (more detail) CSS Flexible Box Layout Module Level 1

Ferramentas

Modernizr
A feature detection library for applying different CSS and JS to your page depending on whether certain CSS/JS features are supported.
css3-mediaqueries-js
A JavaScript polyfill to add Media Query support to old versions of IE (5+.)

Consulte também

Graphics for responsive sites
Ideas to keep in mind when designing graphics for responsive sites and applications.
Responsive navigation patterns
How do you make a UI that looks and works as great on a smartphone as it does on the desktop? Learn how to design UIs that change to fit your user's screen.

Etiquetas do documento e contribuidores

 Contribuidores para esta página: mansil
 Última atualização por: mansil,