移动端特点

移动端特点

视口

• 使用meta标签设置视口宽度，制作适配不同设备宽度的网页。

• 最大缩放比，大于0的数字：maximum-scale

• 最小缩放比，大于0的数字：minimum-scale

• 用户是否可以缩放：user-scalable= no / yes

  标准写法(移动端)：

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

百分比布局

• 百分比布局， 也叫流式布局。通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩。

• 效果： 宽度自适应，高度固定。

• 最大宽度（高度）：max-width (height)

  最小宽度（高度）：min-width (height)

CSS3盒子模型

​ CSS中设置的宽度width里面包含了border和padding，设置样式不会撑大盒子。

• box-sizing: border-box;