最近在学移动端web开发,很多概念、技术学起来模糊不清,特地查资料并梳理对比一下,以供以后再来复习。
自适应和响应式
- 自适应是为了解决如何才能在不同大小的设备上呈现同样的网页,但是这样的话会出现问题,如果屏幕太小,即使网页能够根据屏幕大小进行适配,但是会感觉在小屏幕上查看内容过于拥挤。响应式正是为了解决这个问题而衍生出来的概念。响应式是为了解决如何才能在不同大小的设备上呈现内容相同排版却不同的网页。
- 简单来说,自适应改变元素大小,响应式改变元素排版。
- 明白了自适应和响应式的区别后,如何应用就很明显了。我们在做移动端web开发的时候,先做自适应,如果感觉内容过于拥挤,我们再局部使用响应式。(为什么不上来直接使用响应式?因为响应式的开发和维护成本太高,所以我们能不用尽量不用。)
meta标签中的viewport
- 移动设备上浏览器的可视区域叫viewport,可以通过document.documentElement.clientWidth来获取。
- 我们经常在移动端页面的头部看到这样的代码
1
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">