响应式设计之 —— 视口

viewport 视口

width: 视口宽度
device-width: 设备屏幕宽度

pc端

pc端只有一个视口,也就是浏览器主窗口的区域

响应式设计之 —— 视口_第1张图片

手机端

移动端有三种视口:

布局视口: layout viewport
可视视口: visual viewport
理想视口: ideal viewport
  • 可视视口

可视视口一般式不固定的,用户的缩放、拖动会修改。

响应式设计之 —— 视口_第2张图片

  • 布局视口

布局视口在每一款设备上是不变的。

响应式设计之 —— 视口_第3张图片

因为移动端的屏幕尺寸都比较小,我们的页面根本放不下,这就有了布局视口的概念了,布局视口是虚拟的,一般都比较大,用户可以通过移动页面,缩放来通过可视视口查看页面的全部内容。

但是只是有这两个视口还是不行的,用户体验不是很好,这就有了我们的理想视口。

  • 理想视口

理想视口就是布局视口在一个设备上的最佳尺寸,理想视口下的页面便于阅读。

响应式设计之 —— 视口_第4张图片

怎么使用理想视口呢?



// 这句话告诉,我要使用理想视口。也就是让布局视口的宽度等于可视视口的宽度 
  • 不指定该属性
布局视口的宽度为厂商默认的宽度
  • 指定属性
布局视口将称为理想视口,也就是等于可视视口。
通常我们会直接指定用户的缩放比例为1

响应式设计之 —— 视口_第5张图片

响应式设计之 —— 视口_第6张图片

响应式设计之 —— 视口_第7张图片

你可能感兴趣的:(响应式设计之 —— 视口)