视口在响应式设计中是一个非常重要的概念。视口的概念针对移动端浏览器,分为两种视口,一种是可见视口即设备大小,另一种是视窗视口即网页宽度。
移动端浏览器通常宽度是 240px~640px,而大多数为 PC 端设计的网站宽度至少为 800px,如果仍以浏览器窗口作为视口的话,网站内容在手机上看起来会非常窄,因此,引入视口(虚拟容器)。
视口的定义方式可以有以下两种 :
1:直接定义宽度
<meta name="viewport" content="width=400">
2:可自动获取移动设备宽度
<meta name="viewport" content="width=device-width">
其中的像素又分为两种:
1:物理像素:指的是手机或电脑屏上的发光点。叫物理分辨率,也叫物理像素。
如:iphone6的分辨率1334*750
在水平方向上有750个发光点,在垂直方向上有1334个发光点。
2:逻辑像素:在写CSS代码时,写的像素叫逻辑像素,
如.box{width:100px,height:100px;}
两种像素之间也存在一定的关系,即:在电脑端,一个逻辑像素等于一个物理像素。
其中视口可以分为:layout viewport(布局视口),visual viewport(视觉视口)和ideal viewport(理想视口)。
layout viewport(布局视口):在PC端上,布局视口等于浏览器窗口的宽度。而在移动端上,由于要使为PC端浏览器设计的网站能够完全显示在移动端的小屏幕里,此时的布局视口会远大于移动设备的屏幕,就会出现滚动条。js获取布局视口:document.documentElement.clientWidth | document.body.clientWidth;
visual viewport(视觉视口):用户正在看到的网页的区域。用户可以通过缩放来查看网站的内容。如果用户缩小网站,我们看到的网站区域将变大,此时视觉视口也变大了,同理,用户放大网站,我们能看到的网站区域将缩小,此时视觉视口也变小了。不管用户如何缩放,都不会影响到布局视口的宽度。js获取视觉视口:window.innerWidth;
ideal viewport(理想视口):布局视口的一个理想尺寸,只有当布局视口的尺寸等于设备屏幕的尺寸时,才是理想视口。js获取理想视口:window.screen.width;
1、在桌面浏览器上,浏览器窗口与视口的宽度一致,而视口(CSS标准文档中称为“初始包含块”)是CSS百分比宽度推算的根源,因此,浏览器窗口是约束CSS布局的视口;
2、在手机上,有两个视口,布局视口会限制CSS布局;视觉视口决定用户看到的网站内容;
3、移动端浏览器还有个理想视口,它是对特定设备上的特定浏览器的布局视口的一个理想尺寸;
4、可以把布局视口尺寸定义为理想视口。这也是响应式设计的基础。
在移动端开发中,常将视口抽象划分为布局视口、视觉视口和理想视口。为什么这么划分呢?我觉得还是为了让我们更好理解CSS像素和设备像素的区别,也就是逻辑像素和物理像素的区别。在PC端开发书写CSS时,对元素的尺寸的限定单位经常就是PX,即像素大小。从一开始接触和学习过程中,一直都是使用PX,导致我们的思维产生定式,总觉得CSS中元素的大小的度量就只有PX了。
另一个默认的思维定式就是在我们CSS代码中,CSS的PX像素单位就是真实的代表一个像素,导致当网页开发转到移动端开发时,一个新概念的出现对我们冲击特别大,很难转过弯来理解,比如现在要说的视口的理解,牵扯出来的CSS像素和设备像素的概念。
其实,只要记住一点,CSS像素PX只是代表WEB网页中的一个度量单位,可以理解为同rem和em等单位一样,需要有一个参照尺寸才能确定其实际大小。比如rem参照根字节点的字体大小来确定自身大小,em参照父级元素字体大小来确定自身大小。思维定式中rem和em参照物是我们“绝对单位”像素PX而定的。
视口
最新推荐文章于 2023-09-05 09:41:52 发布