前端的那些事之移动端--基础-优快云博客

本文介绍了移动端网页设计的基础知识，包括视口设置、响应式单位（如em和rem）、媒体查询及多列布局的应用。通过实际代码示例展示了如何实现自适应布局，并探讨了Flexbox伸缩性盒模型的相关属性。

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

2019独角兽企业重金招聘Python工程师标准>>>

移动端基础知识

视口

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

- device-width: 设备宽度
- initial-scale: 初始的缩放比例
- minimum-scale=1:允许用户缩放到的最小的比例
- maximum-scale=1:允许用户缩放到的最大的比例
- user-scalable:用户是否可以手动缩放

自适应的单位（px, em, rem）
- px: 在web页面初期的制作中，我们会使用px来设置我们的文本，他比较稳定和精确。
- em: 浏览器中放大或者是缩小的时候 em 能改变大小，（大小会随着父级元素的大小改变而改变）;
- rem: 浏览器中放大或者是缩小的时候 rem 能改变大小，（大小会随着根级元素的大小改变而改变）;
- 16px = 1em
- 16px = 1rem
rem换算关系
- html{font-size: 62.5%; /* 10 / 16 * 100% = 62.5%*/} 10px = 1rem
- html{font-size: 625%; /* 100 / 16 * 100% = 625%*/} 100px = 1rem
媒体查询

@media{}
	链接引用方式
	<link rel="stylesheet" media="screen and (min-width: 600px)" type="text/css" href="css/css2.css"/>
	@media screen and (min-width: 600px) and (min-width: 600px) {
		选择器：{
			属性： 属性值；
		}
	}

多列
- column-count 指定设置的栏目的列数
- column-width 指定设置的栏目的宽度
- column-gap 改变栏目之间的长度默认是1em
- column-rule 间隔的位置的边框 (分割线)
- column-break-inside: avoid; 为了避免item被拦腰截断（针对于子元素的）

多列demo
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
			*{padding: 0px; margin: 0px;}
			
			section{width: 80%; margin: 0 auto;}
			.page{
				column-count: 4;
				/*column-width: 250px;*/
				column-gap: 20px;
				column-rule: 2px dashed red;
			}
			.page div img{width: 100%;display: inline-block;}
			
			.page div{-webkit-column-break-inside: avoid;}

		</style>
	</head>
	<body>
		
		<section>
			<div class="page">
				<div id="">
					<img src="img/1.jpg"/>
					<h1>第七次课水电费</h1>
					<p>上课了大家分开了十分简单速度快解放束带结发绿色减肥了水电费lksf</p>
				</div>
				<div id="">
					<img src="img/2.jpg"/>
					<h1>第七次课水电费</h1>
					<p>上课了大家分开了十分简单速度快解放束带结发绿色减肥了水电费lksf</p>
				</div>
				<div id="">
					<img src="img/3.jpg"/>
					<h1>第七次课水电费</h1>
					<p>上课了大家分开了十分简单速度快解放束带结发绿色减肥了水电费lksf</p>
				</div>
				<div id="">
					<img src="img/4.jpg"/>
					<h1>第七次课水电费</h1>
					<p>上课了大家分开了十分简单速度快解放束带结发绿色减肥了水电费lksf</p>
				</div>
				<div id="">
					<img src="img/5.jpg"/>
					<h1>第七次课水电费</h1>
					<p>上课了大家分开了十分简单速度快解放束带结发绿色减肥了水电费lksf</p>
				</div>
				<div id="">
					<img src="img/1.jpg"/>
					<h1>第七次课水电费</h1>
					<p>上课了大家分开了十分简单速度快解放束带结发绿色减肥了水电费lksf</p>
				</div>
				<div id="">
					<img src="img/2.jpg"/>
					<h1>第七次课水电费</h1>
					<p>上课了大家分开了十分简单速度快解放束带结发绿色减肥了水电费lksf</p>
				</div>
				<div id="">
					<img src="img/3.jpg"/>
					<h1>第七次课水电费</h1>
					<p>上课了大家分开了十分简单速度快解放束带结发绿色减肥了水电费lksf</p>
				</div>
			</div>
		</section>
		
		
	</body>
</html>

伸缩性盒模型（Flexible-box）
- 容器属性: 属性决定了主轴的方向
- 个轴线排不下，怎么去换行 flex-wrap： nowrap | wrap | wrap-reverse nowrap(默认)：不换行
  - row(默认值)：主轴为水平方向，起点在左端
  - column：主轴为垂直方向，起点在上方
  - row-reverse：主轴为水平方向，起点在右边
  - column-reverse：主轴为垂直方向，下方
- flex-wrap属性 | 如果一个轴线排不下，怎么去换行
  - flex-wrap： nowrap | wrap | wrap-reverse
  - nowrap(默认)：不换行
  - wrap：换行，第一行在上方
  - wrap-reverse：换行，第一行在下方
flex-flow | 属性值是flex-direction属性和flex-wrap属性的简写形式
justify-content: flex-start | flex-end | center | space-between | space-around
- flex-start(默认值): 左对齐
- flex-end(默认值): 右对齐
- center: 居中
- space-between: 两端对齐，项目之间都相等
- space-around: 每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍