bootstrap

屏幕尺寸(宽度)

• 超小屏幕，宽度 < 768， 如：手机

• 小型屏幕，768 <= 宽度 < 992，如：平板

• 中等屏幕，992 <= 宽度 < 1200，如：电脑

• 超大屏幕，宽度 >= 1200，如：电视

响应式布局

• 根据不同的客户端显示不同的效果，就称为响应式布局。

• 由于移动设备访问网站的比例大幅提升(已经成为主流)，因此我们设计网站时需要移动设备有限考虑。

解决方案

• 根据不同的客户端，跳转到不同的网站

  • 适合于几乎无法兼容的大型网站，如：京东

  • 客户端类型判断：window.navigator[‘userAgent‘]

• 使用媒体查询

  • 说明：适合于不太复杂的可以兼容的网站(一般都不太大)

  • 语法：

    @media    媒体查询标志
    [only] screen  [只]支持屏幕
    and     并且的意思
    min-width   最小宽度
    max-width   最大宽度
    min-height   最小高度(了解)
    max-height   最大高度(了解)

  • 使用方式1：使用@media指定

    
    @media screen and (max-width:768px) {
     ? div {
     ? ? ? width: 100%;
     ? ? ? height: 200px;
     ? ? ? background: green;
     ? }
    }

  • 使用方式2：使用@import导入

    
    @import url(02-chaoxiao.css) screen and (max-width:768px);

  • 使用方式3：使用link标签，然后指定media属性

    
    <link rel="stylesheet" type="text/css" href="02-chaoda.css" media="screen and (min-width:1200px)">

viewport(了解)

• 说明：viewport 是用户网页的可视区域，翻译为中文可以叫做"视区"。

• width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。

• height：和 width 相对应，指定高度。

• initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。

• maximum-scale：允许用户缩放到的最大比例。

• minimum-scale：允许用户缩放到的最小比例。

• user-scalable：用户是否可以手动缩放，设为no禁止缩放

• 示例：<meta name="viewport" content="width=device-width,initial-scale=1.0">