html页面自适应需求及解决办法

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

制作一个页面需要自适应设备，以及界面。

问题1 ：插入表格，高度自适应内容

页面中需要插入一个表格，表格分左右两个区域。左边是姓名，右边的内容不定，表格高度要自适应里面的内容多少。表格内容要左右居中、上下居中。主要难点就是左边的表格要跟随右边的表格，所以不能设置高度，但是又要实现上下居中的效果

解决方法

可以使用display：table。table表格中的单元格最大的特点之一就是同一行列表元素都等高。所以，很多时候，我们需要等高布局的时候，就可以借助display:table-cell属性。

        .table {                                        //表格，
          display: table;                               //相当于“table”标签；
          margin: 24px 0px;
          font-size: 10px;
          line-height: 16px;
        }

        .table_left {                                   
          display: table-cell;                          //相当于“td”标签；
          height: 100%;
          text-align: center;
          vertical-align: middle;                       //实现垂直居中
        }

        .table_right {
          display: table-cell;                          //相当于“td”标签；
          padding: 8px 8px;                             //实现垂直居中
          height: 100%;
        }

问题2：取消js判断设备类型并link引入外部样式。

css使用外部样式非常方便，主要是要新建一个css文件，然后实现html和css分开书写，这样就是会方便修改css样式，外部样式主要是在html头文件中使用link引入。
但是产品需求是不能加入其它文件，他只需要一个html文件，我需要在一个单一的页面中注入css样式，并且能够实现判断设备并自适应设备样式。

解决方法

这里不使用外部引入css样式，而是将css和其他如 font img ico等文件放入远程服务器中，使用远程引入方法，这样就只需要一个html页面即可。但是这样做有个缺点，就是加载页面会变慢，因为要加载远程资源。

问题3. pc端页面不设固定宽度，但页面要始终居中显示，左右边距相同；

解决方法

设置页面的最大最小宽度，这里最小宽度设置为768px, ipad mini的屏幕可用宽度是768，以此为分割， 同样判断设备类型时，页面最小宽度最好也设为768，因为如果大于此宽度，ipad屏幕宽度装不下完整的pc样式页面。

.box {
  max-width: 1440px;
  min-width: 768px;
  margin: 0px auto;
}

问题4 引入图片要自适应

解决方法

取消页面固定宽度等设置，如果要自适应，就得将图片设置为跟随页面宽度变化。

img:nth-child(1) {
  width: 100%;
}