移动端web页面响应式布局（文字、图片、表格）_网页中手机端表格是怎么实现的-CSDN博客

本文链接：https://blog.csdn.net/Ada5899/article/details/105805290

本文介绍了移动端web页面的响应式布局方法，包括设置meta标签以适应不同设备的DPR，使用JS计算并设置html的font-size。布局部分强调使用rem单位，并举例说明如何转换像素值。对于图片，推荐设置width为100%，表格则应用固定布局并保持宽度100%。最后展示了布局实现后的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

移动端web页面响应式布局

絮絮叨叨：最近被领导抓去写了个前端页面，还要是适应移动端的。。还三天要完成。。前端小白

的我硬生生刚出来了，这两天正好闲了点，总结总结。

设置meta
写过前端的小伙伴们应该对这个会比较眼熟，这是在html头部里的配置。

	<head>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    	<title>自适应</title>
    </head>

解释一下这个meta：

属性	说明
viewport	移动端上用来显示网页的区域
width	可视区域的宽度，移动设备用来显示网页的宽度，值可以是数字或是关键词device-width，即根据设备宽度来设置显示网页的宽度
height	与width相同
intial-scale	页面的初始缩放值，值为数字。1.0表示按实际尺寸显示，无任何缩放
minimum-scale	允许用户的最小缩放值，值为数字
maximum-scale	允许用户的最大的缩放值，值为数字，1.0表示不允许用户缩放到实际尺寸值上
user-scalable	是否可对页面进行缩放，值为"no"表示禁止缩放，值为"yes"表示允许

利用js计算当前设备的DPR，动态设置在html标签上，并动态设置html的font-size。

    <script type="text/javascript">
        (function (doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    if (clientWidth >= 750) {  //750是宽度，根据UI设计稿，如果设计稿是640就写640
                        docEl.style.fontSize = '100px';
                    } else {
                        docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
                    }
                };

            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
    </script>

在Chrome上选择不同设备，可以发现font-size随着设备的变化而计算合适的font-size
布局
因为在JS里设置了页面会按需适应，所以在页面布局的时候，要用rem布局，并且要 /100，即

原来width：300px；的要变成width： 3rem；font-size、margin等也可以用rem来布局。

图片

图片要设置width :100%;

		<img src="images/pic5.jpg" alt="" style="width: 100%">

表格(style=“table-layout: fixed;” width=“100%” cellspacing=“0” cellpadding=“2”)

    <table style="table-layout: fixed;" width="100%" cellspacing="0" cellpadding="2">
        <tr>
            <th style="width: 25%">吃</th>
            <th style="width: 25%">喝</th>
            <th style="width: 25%">玩</th>
            <th style="width: 25%">乐</th>
        </tr>

        <tr>
            <td>江湖菜</td>
            <td>小糊涂仙</td>
            <td>手机</td>
            <td>宝宝</td>
        </tr>
        <tr>
            <td>早茶</td>
            <td>优益C</td>
            <td>旅游</td>
            <td>代码</td>
        </tr>
    </table>

其他样式

table{
    /*取消表格边框*/
    border-collapse: collapse;
}
table,tr,th,td{
    border-bottom: 0.01rem solid rgb(212, 212, 212);
}

th,td{
    font-size: 0.2rem;
    text-align: left;
}
td{
    /*允许长单词换行到下一行：*/
    word-wrap: break-word ;

    /*字间距为3px*/
    /*letter-spacing: 0.03rem;*/

    /*行高为35rem*/
    line-height: 0.35rem;

}

效果图

其他样式

*{
    margin:0;
    padding:0;
}
html,body{
    width:100%;
    height:100%;
    font-size:100px; 
    //字体样式，Helvetica 苹果和安卓都支持，主要是满足两个系统对于数字和英文字母的区别。
    font-family:Helvetica,Arial,"Microsoft YaHei",PingFangSC-Regular,"Hiragino Sans GB",
    			"Droid Sans Fallback","WenQuanYi Micro Hei",sans-serif;
}