Tech

viewport 使用笔记 - 2

接着上次的 viewport 使用笔记 - 1，文中只说了在 metatag 中设置页面的 viewport，这只是方式一，等于将控制权交给了 HTML。下面就来记录一下另一种在 CSS 中定义的方式 - @viewport，这样一来布局职能就属于 CSS 来掌控了，或许这种设备适配方式才是正确的吧。

viewport meta标签并不具有“规范性”，即它不是W3C的正式标准，也非Web标准。
@viewport 目前也处于草案阶段
via - W3C - css-device-adapt

@viewport

使用 @viewport CSS 规则控制 viewport，与在 HTML 中的 meta 标签效果一样。

1
2
3
4
5
6
7
8
9
10
11
12
@media screen and (max-width: 400px) {
    @-ms-viewport{
        width: 320px;
        /* the viewport for small devices is set to 320px  */
    }
    @-o-viewport {
        width: device-width;
    }
    @viewport {
        width: device-width;
    }
}

@viewport 支持情况，仅 IE10+, Opera11+, Opera Mobile 支持，且需要加上私有前缀。

说明

用默认 width 的值 device-width，来设置 viewport 的宽度。与 meta 标签中设置的 content="width=device-width" 效果相同。

上面这个 example 中 @-ms-viewport 这里需要着重说明下，IE10会忽视掉那些宽度小于400像素的元窗口标签（在“snap mode”下），添加浏览器前缀，确保各浏览器里的渲染效果是一致的。

实践

在项目中使用了 twitter bootstrap，里面的 grid system，其中也有 Media queries 这一部分。看下了它对不同终端的划分情况，大致分为 4 个区间，自己对各终端的适配也没有足够的经验，所以在项目的 grid 构建中，也是按照他们的规格去尝试，下面对这一部分的使用记录一下。

  • 规格说明

    • bk-col-width: 16px (栅格宽度)
    • bk-col-gutter: 5px (间隙宽度)
    • bk-screen-sm: 750px (移动设备)
    • bk-screen-md: 1000px (平板，普屏PC)

    • bk-screen-lg: 1200px (宽屏设备)

      这些变量已经在 _grid.scss 中定义好了，方便后期重新定制。

  • 初步规划

    为了满足响应式布局，目前做了如上所示的3种规格，适应不同分辨率的终端，以下是具体说明

    • 屏幕尺寸 max-width: 750px，即小于或等于 749px，横向滚动条出现
    • 屏幕尺寸 min-width: 750px ~ max-width: 1000px，即 750px ~ 999px，内容区域 bk-con = 692px(bk-col27) 此分辨率适应移动终端
    • 屏幕尺寸 min-width: 1000px ~ max-width: 1200px，即 1000px ~ 1199px，内容区域 bk-con = 926px(bk-col36) 平板，普屏PC
    • 屏幕尺寸 min-width: 1200px，即大于或等于 1200px，内容区域 bk-con = 1160px(bk-col45) 宽屏PC

  • 备注

    后期经过实际的应用测试，发现此栅格并不适合各种场景，特别是 bk-col-gutter: 5px，这样一来左右相邻的两个模块间隙只有 10px，感觉留白过少，所以此处还是应该再做调整。

参考资料