wap(html)知识点整理（持续更新）

最新推荐文章于 2021-06-19 06:39:22 发布

原创最新推荐文章于 2021-06-19 06:39:22 发布

· 2.6k 阅读

0 ·

版权

文章标签：

#wap #html #知识点

问题整理专栏收录该内容

5 篇文章

订阅专栏

本文整理了HTML布局中的常见问题与解决方案，包括px、em、rem的关系，解决Chrome中1rem不等于10px的问题，左右固定与自适应布局，确保body高度100%，处理touchend事件，禁止双击放大，禁用滚动条，设置textarea固定大小以及按钮内文字换行等知识点。

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

wap(html)知识点整理（持续更新）

1、px、em、rem的关系

px为固定大小
em/rem为相对大小，其中em相对其父节点，rem相对html根节点

2、google浏览器无法设置1rem=10px问题

在把px转换成rem的过程中，会在设置html的css的font-size为62.5%已使得在进行px到rem的转换中1rem=10px。但是这种方式在chrome中不起作用，这样设置之后1rem=12px，这是因为chrome认为字体的最小为12px，你设置1rem等于10px，chrome强制转换成1rem=12px。
把html的font-size设置成625%，那么1rem=100px就可以了。

3、右边固定宽度，左边自适应问题；左边固定，右边自适应问题

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>

<body>
    <div>左边固定，右边自适应(一定记住要clear float)</div>
    <div>
        <div style="width: 200px; height: 200px;float: left;background-color: gray;">
            200X200
        </div>
        <div style="height: 200px; margin-left: 200px;background-color: purple;color: white;">  自适应宽度!!!自适应宽度!!!自适应宽度!!!自适应宽度!!!自适应宽度!!!自适应宽度!!!自适应宽度!!!自适应宽度!!!自适应宽度!!!自适应宽度!!!自适应宽度!!!自适应宽度!!!自适应宽度!!!自适应宽度!!!自适应宽度!!!自适应宽度!!!自适应宽度!!!自适应宽度!!!自适应宽度!!!自适应宽度!!!自适应宽度!!!自适应宽度!!!自适应宽度!!!自适应宽度!!!
        </div>
        <div style="clear: both;"></div>
    </div>
    <hr/>
    <div>右边固定，左边自适应(一定记住要clear float)</div>
    <div>
        <div style="width: 100%;height: 200px; margin-left: -200px; float: left;background-color:purple;">
            <div style="margin-left: 200px;color: white;">通过margin-left为负数来固定右侧内容，同时设置内部的div的margin-left为整数来调整显示范围。通过margin-left为负数来固定右侧内容，同时设置内部的div的margin-left为整数来调整显示范围。通过margin-left为负数来固定右侧内容，同时设置内部的div的margin-left为整数来调整显示范围。</div>
        </div>
        <div style="width: 200px; height: 200px; float:left;background-color:gray;">
            200X200
        </div>
        <div style="clear: both;"></div>
    </div>
</body>

4、让body的height高为100%

之前直接设置body的height为100%，发现没有用。后面发现需要把html和body同时设置heigth为100%。

5、touchend无法触发

在touchstart触发时调用event.preventDefault();方法就可以了。

6、禁止双击放大网页

加入meta，进行限制

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

7、禁止浏览器滚动条

overflow-x: hidden;
overflow-y: hidden;

8、textarea固定大小

resize: none;

9、button上的文字换行

两行文字中加入谷歌测试有效

<input type="button" value="第一行&#13;&#10;第二行" />