viewport(视口)

viewport 就是浏览器显示页面内容的屏幕区域,可以分为布局视口、视觉视口和理想接口。

  1. layout viewport,默认视口
  2. visual viewport,当前可以看到的区域
  3. ideal viewport,理想的视口尺寸

视口标签的主要目的是让布局视口的宽度和理想视口的宽度一致

视口标签

  1. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum=1.0,minimum=1.0">
  2. <!--
  3. width:viewport 宽度,可以设置为 device-width 特殊值
  4. initial-scale:初始缩放比
  5. maximum-scale:最大缩放比
  6. minium-scale:最小缩放比
  7. user-scalable:视口可以缩放
  8. -->

标准的 viewport 参数

  1. 视口宽度和设备保持一致
  2. 视口默认缩放比为1.0
  3. 不允许用户缩放
  4. 最大缩放比为1.0
  5. 最小缩放比为1.0

    倍图

    一个 Css 像素能显示的物理像素点的个数,成为物理像素比或屏幕像素比。

    移动端技术选型

  6. 单独制作移动端页面

    1. 流式布局
    2. flex 布局
    3. less + rem + 媒体查询
    4. 混合布局
  7. 响应使页面兼容移动端
    1. 媒体查询
    2. bootstrap