移动web入门一点点基础

理论基础

• 适配问题：屏幕尺寸不一样
  • 解决方案：百分比，自适应布局，叫做流式布局，同时还需要对移动端的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 了解

今天没案例，下次写，告辞！