--- title: Desenho responsivo slug: Web/Progressive_web_apps/Responsivo tags: - Aplicações - Aplicações da Web progressivas - Desenvolvimento da Web - Responsivo translation_of: Web/Progressive_web_apps/Responsive/responsive_design_building_blocks translation_of_original: Web/Progressive_web_apps/Responsive ---

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.