创建响应式布局--显示表格数据，使用测量单位，使用媒体查询

创建响应式布局--显示表格数据：

1、使用表格时，适应不同的屏幕，则可以通过以下几个方法：

   A：使用CSS改变外观

   B：创建多个表格---不推荐

创建响应式布局---使用测量单位：

1、测量单位：

   A：使用px

   B：使用百分比

   C：em以及rem(root em   基于HTML)

   D：viewport测量（注意浏览器兼容性问题）

      a： 1vm = viewport宽的1%

      b:  1vh = viewport高的1%

      c:  1vmin = 1vm和1vh中的最小值

      d:  1vmax = 1vm和1vh中的最大值

 创建响应式布局---使用媒体查询

1、viewport meta标签：

   <meta name=”viewport” content=””>

   Content中，属性以及属性值：

   width: viewport的宽度，可以是像素值或者是device-width

   initial-scale：定义了页面出现时的缩放比例

   maximum-scale：确定viewport可以被放大的最大值，设置该项可限制用户的手指缩放范         

                 围

   minimum-scale：确定viewport可以被缩小的最大值，设置该项可限制用户的手指缩放范         

                 围

   user-scalable：确定是否允许用户进行缩放，默认值是yes

2、<meta name=”viewport” content=”width=device-width ，initial-scale=1.0”>

3、媒体查询：

   A：IE9+

   B：IE Mobile 10+

   C：Firefox 3.5+

   D：Firefox for Android 26+

   E：Chrome 4+

   F：Chrome for Android 32+

   G：Safari 4.0+

   H：Opera 9.5+

4、@media screen and (min-width：0px) and (max-width : 480px){}   ---突变点

   0-480

   481-959

   960-1399

   1400+