翻译正在进行中。

响应式Web应用使用媒体查询和viewport等技术,以确保它们的页面适配任何设备,比如:桌面、移动手机、平板,或者其他新的设备。

核心指南

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.

技术

Technology Description Support summary Latest spec
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

工具

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+.)

参见

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.

文档标签和贡献者

 此页面的贡献者: liminjun
 最后编辑者: liminjun,