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

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

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

   A:使用CSS改变外观

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

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

1、测量单位:

   A:使用px

   B:使用百分比

   Cem以及rem(root em   基于HTML)

   Dviewport测量(注意浏览器兼容性问题)

      a1vm = viewport宽的1%

      b:  1vh = viewport高的1%

      c:  1vmin = 1vm1vh中的最小值

      d:  1vmax = 1vm1vh中的最大值

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

1、viewport meta标签:

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

   Content中,属性以及属性值:

    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、媒体查询:

   AIE9+

   BIE Mobile 10+

   CFirefox 3.5+

   DFirefox for Android 26+

   EChrome 4+

   FChrome for Android 32+

   GSafari 4.0+

   HOpera 9.5+

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

   0-480

   481-959

   960-1399

   1400+

原文地址:https://www.cnblogs.com/zhanghuiyun/p/5497971.html