自适应和响应市布局

• 固定布局：

  • 网页版一律使用px作为单位
  • 手机版①可设定viewport的width为320，通过js动态修改initial-scale控制页面②设定viewport的width为640，user-scalable=no。（640px超过手机宽度，页面会自动缩放到适应屏幕）

• 流式布局：

  • 用百分数来设定网页，但由于字体大小都是用px设定，在有些设备上字体会很大或很小

• 弹性式布局：

  • 用百分数设定网页布局，包裹文字各元素的尺寸采用em作为单位
  • 若使用vm、vh可实现高度和文字都缩放自如，就不需要弹性布局了，但vm、vh要考虑兼容性问题，有兼容性问题的用px、em代替就行

• 响应市布局：可在PC、移动端呈现不同排版页面，但对于复杂页面如淘宝，不如将PC端和移动端分开，否则要写很多媒体查询。