手机H5页面，信纸格子和文字对齐的问题

image.png

蓝色的横线是背景图片，文字是写在text area里面，但是手机宽高是不同的，所以导致文字和后面的蓝色横线会重叠。

解决方法：
首先是横线背景，切图只需要切一条线的图就够了，图片设计高度是48px,保留上面那条蓝线。
把切图作为text area的背景，background： url(....) repeat;

把基本的样式写好后，就是最重要的一步了，textarea的line-height和background-size;

如果光是设置文本框行高，是解决不了问题的，换一个宽高不同的手机，文字和背景立刻就会错乱，重叠在一起。

所以，设置文本框行高的同时，还是需要设置background-size，而且line-height和background-size的值，必须是固定值，也就是多少px。

设置固定值的思路：
假设手机的尺寸和设计图一样，是750*1334，那么text area的line-height设置成48px,文本框背景的background-size设置成100% 48px; 这样的设置，文本和背景肯定能对齐。

再假设，手机的尺寸和设计图的一半，是375*667，那么text area的line-height设置成24px,文本框背景的background-size设置成100% 24px; 这样的设置，文本和背景也肯定能对齐。

从这里就可以看出其中的关系了，就是一个比例的问题。

用js来解决：

// vue文件
<textarea class="text-area" v-model="writeText" :style="textareaStyle"></textarea>

// backgroundSize: '100% 24px', lineHeight: '24px'
const dpi = window.innerWidth / 750;
const n = Math.floor(48 * dpi);
this.textareaStyle = {
      backgroundSize: `100% ${n}px`,
      lineHeight: `${n}px`
};