理论基础
- 适配问题:屏幕尺寸不一样
- 解决方案:百分比,自适应布局,叫做流式布局,同时还需要对移动端的viewport视口进行设置才能达到目的
- 流式布局的特点:非固定像素,内容向两侧填充
- 视觉窗口:viewport是移动端特有的,看成是一个虚拟的区域,哟用来承载网页,其关系:浏览器承载viewport,而viewport承载网页
- 适配方案的要求:
- 1、网页的宽度必须与浏览器保持一致
- 2、默认显示的缩放比例和pc端保持一致–>缩放比例:1.0
- 适配设置:
- viewport适配功能:
- 1、设置宽度 width=device-width 视口的宽度等于当前设备的宽度
- 2、设置高度 height
- 3、设置缩放比例 initial-scale=1.0
- 4、设置视口是否允许用户自行缩放 user-scalable=no (no不允许,yes允许,1/0)
- 5、最大缩放比例maximun-scale=1.0 了解
- 6、设置最小缩放比例 mmininum-scale=1.0 了解
今天没案例,下次写,告辞!