移动端必须掌握知识点
Posted xiaoaitongxue
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端必须掌握知识点相关的知识，希望对你有一定的参考价值。
一、1px边框问题
用伪元素模拟边框然后缩放0.5
ul li::after {
content: ‘‘;
width: 1px;
height: 70px;
background-color: red;
position: absolute;
right: 0;
top: 0;
/* 解决手机端有些时候1像素看起来想两像素的问题 */
transform: scaleX(0.5);
}
二、横向滚动条
1.滚动产生需满足的条件
- 竖向滚动必须有一个定高，横向滚动条必须有定宽，一定不能由内容撑开。
- 滚动容器中的内容占据的高度要大于滚动容器本身的高度
当条件同时满足时才会出现滚动条。
正常文档流的情况下，水平盒子如果排不开会自动换行 那么结果就是滚动容器的内容的宽度永远不会大于滚动容器自身的宽度
2.代码展示
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/横向滚动条.css">
</head>
<body>
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
* {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
.box {
// 超出宽度，加滚动条
overflow-x: auto;
}
.box ul {
// 使子项水平排列
display: flex;
}
.box ul li {
flex: 100px;
// 不换行
flex-wrap: nowrap;
/* 默认状态下，子元素的宽度之和超过容器的会被压缩，忽略掉我们自己设置的宽度 */
flex-shrink: 0;
border: 1px solid #ccc;
height: 100px;
line-height: 100px;
text-align: center;
background-color: #09f;
}
以上是关于移动端必须掌握知识点的主要内容，如果未能解决你的问题，请参考以下文章
解决移动端报错：Unable to preventDefault inside passive event listener due to target being treated as……(代码片段