Responsive design - 渐进式 Web 应用（PWA） 编辑
响应式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.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论