响应式设计 · Bootstrap Metro UI CSS 中文版

启用响应式特性

在项目中使用响应式，需要添加额外的meta标签，并且在<head>内添加响应式样式。

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="modern-responsive.css" rel="stylesheet">

* 在hdpi设备下，你需要给meta的viewport添加target-densitydpi=device-dpi参数。

关于响应式的Metro UI CSS

基于一系列的条件（比例,宽度,显示类型，等等），Media queries可以自定义CSS,但通常都是围绕于min-width 和 max-width.

通过网格改变列的宽度
凡是必要的地方Stack元素代替float元素
调整标题和文本大小，用来适应设备

支持的设备

Metro UI CSS支持在一个单独的文件使用少数媒体查询，用来使你的项目更适合在不同的设备和屏幕分辨率。这里是包括:

	布局宽度	列宽度	间距
大屏幕	1200px	正在进行中...	正在进行中...
默认	980px	60px	20px
Portrait tablets	768px及其以上	42px	20px
Phone to tablets	767px及其以下	流体列，无固定宽度值
Phones	480px及其以下	流体列，无固定宽度值

        /* Large desktop */
        @media (min-width: 1200px) { ... }
 
        /* Portrait tablet to landscape and desktop */
        @media (min-width: 768px) and (max-width: 979px) { ... }
 
        /* Landscape phone to portrait tablet */
        @media (max-width: 767px) { ... }
 
        /* Landscape phones and down */
        @media (max-width: 480px) { ... }