blog-web/viewport.md at a29cff3aedcaa529e50b4c126ac24c1faa2ce562

sookie/blog-web

Fork 0

结发受长生 368ea5915b 代码缩进调整

2018-05-10 09:47:30 +08:00

5.2 KiB

Raw Blame History

title

date

概念

通俗地讲 , 移动设备上的viewport是指设备的屏幕上能用来显示网页的那块区域

关于像素(px) 这是css当中常见的定义像素值的单位但是这个值并不能完全等同于设备的物理像素因为页面是可以被缩放的 , 如果缩放到2倍那么1px在页面上就会占用2个物理像素的距离

移动设备的3个viewport

layout viewport

它的宽度是大于浏览器可视区域的宽度的宽度值可以通过document.documentElement.clientWidth来获取还需要一个viewport来代表浏览器可视区域的大小

visual viewport

它的宽度可以通过window.innerWidth来获取

现在已经有两个viewport了 , 但是浏览器还觉得不够 , 因为越来越多的网站都会为移动设备进行单独的设计 , 所以还必须要有一个能完美适配移动设备的viewport

完美适配指的是 :

不需要用户缩放和横向滚动条就能正常地查看网页的所有内容

显示的文字大小合适 , 不会因为在高密度像素的屏幕里显示得太小而无法看清 . 当然不只是文字 , 其他元素的大小也是同样的道理

ideal viewport

这是移动设备的理想viewport , 它并没有一个固定的尺寸 , 不同的设备有不同的尺寸例如所有iphone设备的ideal viewport的宽度都是320px , 无论它的屏幕宽度是320还是640 安卓设备则比较复杂 , 有很多不同的值页面中元素大小如果根据ideal viewport来适配 , 则不会出现在像素密度太高的屏幕上 , 元素显示太小的问题了

利用meta标签对viewport进行控制

移动设备默认的viewport是layout viewport , 但是在进行移动设备网站的开发时 , 我们需要的是ideal viewport 通常需要在head标签当中添加

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

属性说明 :

width - 控制viewport宽度 , 可以指定一个值 , 或者特殊的值 , device-width为设备的宽度
height - 与width相对应 , 指定高度 , 这个属性并不重要 , 很少使用
initial-scale - 初始缩放比例 , 比如1.0
maximum-scale - 允许用户缩放到的最大比例
minimum-scale - 允许用户缩放到的最小比例
user-scalable - 用户是否可以手动缩放 , 值为yes或者no

要得到ideal viewport只需要把width设置为device-width即可需要说明的是 , 有关缩放的属性都是相对于ideal viewport进行缩放的所以如果只写

<meta name="viewport" content="initial-scale=1" />

也可以达到ideal viewport的效果

视区的相关单位

vw - 相对于视区的宽度 , 视区总的宽度为100vw
vh - 相对于视区的高度 , 视区总的高度为100vh
vmin - 相对于视区的宽度与高度当中较小的一个
vmax - 相对于视区的宽度与高度当中较大的一个

比如某种情况下视区的宽度为1000px div的width为2vw , 那么这个div的实际显示宽度就是20px 高度同理

实际应用

弹性布局

实践当中 , 如果我们需要把两个元素横向并排布局设置浮动之后 , 分别指定宽度为25%与75% 与指定宽度为 25vw和75vw 相比并没有什么优势 , 实际的作用也是一样的

在布局方面要发挥更大的作用 , 需要结合一个CSS的函数calc 就是calculate的缩写这个函数的作用是执行表达式的计算

如果不使用这个函数 , 我们通常是需要使用一些预处理工具 , 比如sass , 才能在css当中编写表达式让预处理工具在打包css代码的过程中完成这个计算但是这样终究比较局限 , 因为视区的宽度高度是页面实际渲染的时候才确定的如果涉及到视区的计算 , 则无法完成

回到最初的问题 , 按照宽度的百分比横向排列两个div 直接用百分比当然是可以的 , 但是如果这个元素有 border margin padding当中的任意一个 , 右边的div就会被挤到下一行 ( 如果是单个元素宽度100%的话 , 盒子会被撑破 , 超出父元素的宽度 )

这时候我们就可以用calc函数配合vw来解决这个问题

.left,.right {
  height : 600px;
  border : 3px solid black;
}
.left {
  background : blue;
  width : calc(25vw - 6px);
}
.right {
  background : pink;
  width : calc(75vw - 6px);
}

出于兼容性的考虑 , 最好给calc加上-webkit-和-moz-的前缀

弹性字体

在响应式布局中 , 字体的大小最好是能跟随视区的大小进行自动调整才能达到比较好的体验可以采用如下方式

:root {
  font-size: calc(1vw + 1vh + .5vmin);
}

:root伪类匹配DOM文档树的根元素

补充说明 使用视区的相关单位的值对应的属性 , 不会跟随页面的缩放变化比如第二个例子当中的字号在放大页面的时候 , 文字的大小是不会改变的

5.2 KiB Raw Blame History

概念