Viewport视口

移动端viewport视口就是浏览器显示页面内容的屏幕区域。在viewport中有两种视口,分别表示为visual viewport(可视视口)和layout viewport(布局视口)。

visual viewport固定大小跟屏幕大小相同,而layout viewport可改变大小。Layout viewport默认大小为980像素,可通过document.documentElement.clientWidth获取。

现代网页需要将layout viewport设置成跟visual viewport等同大小,方便进行网页制作。

Viewport设置

通过<meta>标签进行设置,name属性指定viewport值,content属性进行视口配置。

取值含义
width设置layout viewport的宽度特定值,device-width表示设备宽。
height设置layout viewport的高度特定值,一般不进行设置。
initial-scale设置页面的初始缩放。
minimum-scale设置页面的最小缩放。
maximum-scale设置页面的最大缩放。
user-scalable设置页面能否进行缩放。
<meta name="viewport" content="width=device-width, initial-scale=1.0">

移动端适配方案

  • 百分比布局,也叫流式布局。

  • 等比缩放布局,也叫rem布局。

响应式布局

利用媒体查询,即media queries,可以针对不同的媒体类型定义不同的样式,从而实现响应式布局。

取值含义
all用于所有设备。
print用于打印机和打印预览。
screen用于电脑屏幕、平板电脑、智能手机等。
speech用于屏幕阅读器等发声设备。

不起眼的小广告

上一篇:Grid网格布局

下一篇:Bootstrap入门与应用