手机端网页的出现的问题？

Question

在一个背景图中放文字,如果是正常浏览器打开文字14px;line-height:20px;如果模拟手机端打开，背景图区域就会缩小，但文字区域没变，就会出现显示问题。文字区域(.column_desc p)的定位都没敢用像素，只好用百分比，但是这样可以实现效果，但不精确。文字的话也只能装一点。
我没太做过手机端页面，不知各位前辈是怎么解决的？

<div class="column_desc">
            <img src="images/gs_top.webp">
            <p>
                读规范，让你的代码更具智慧和美丽的方法用框架，选择一份合适的HTML和CSS基础代码找代码，在这里找到她，或给你启发，或她就是你的......
            </p>
</div>
<style>
body {
    max-width: 640px;
    margin: 0 auto;
    font-family: "microsoft yahei" !important;
}
.column_desc {
    position: relative;
}
img {
    max-width: 100% !important;
    display: block;
}
.column_desc p {
    position: absolute;
    right: 5%;
    width: 40%;
    top: 9%;
    color: #fff;
    font-size: 14px;
    line-height: 25px;
    font-family: "宋体";
    height: 64%;
    overflow: hidden;
}
</style>

模拟手机端
正常浏览器

Answer 1

这个问题我也遇到过，但是不知道应该怎么解决。在移动端页面中图片可以自适应缩小，但是字体没法等比的缩小，因为字是给人看的，缩太小就没法看了，而手机屏幕就那么大，它所能显示的文字内容是很有限的。所以一般我的方法就是响应式布局，在移动端的页面布局应该和桌面端不一样，桌面端两栏，移动端就变成一栏，只有增加文字区域的面积，才能让文字显示的多一点，当然，再多那就没办法了，只能省略或者跳转到详情页面。

Answer 2

去看看这个方案，根据屏幕寛高和分辨率设置缩放比例。亲测好用，门槛略高https://github.com/amfe/article/issues/17

Answer 3

用rem做单位

Answer 4

页面用Rem来布局，看我写的文章，移动站