移动端的知识 以及 排静态网页的步骤

一.移动端涉及的知识

1.移动端与PC端的区别

屏幕大小不同：移动设备的屏幕较小，通常以英寸表示尺寸，而PC端显示器较大。
交互方式不同：移动端以触摸为主，而PC端使用鼠标和键盘。
网络环境不同：移动端常常依赖不稳定的移动网络，而PC端多数情况下使用稳定的有线网络。
性能差异：移动设备的性能普遍低于PC，尤其是在处理器速度和内存容量上。

2.移动端页面布局

多机型适配：移动端设备种类繁多，需要适应不同尺寸的屏幕。
页面结构简单：由于屏幕小，应避免复杂的页面结构。
核心思想：不允许水平滚动条，整体宽度要与屏幕一致。

3.视口设置

viewport概念：移动端专有的用于显示网页的窗口，通过meta标签设置。
常见设置：

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

**作用：**确保页面在不同设备上全屏显示且不缩放。

4.移动端布局方式（常用的）

流式布局：使用百分比定义元素宽度，高度使用固定px或内容撑开。
弹性布局：通过flex属性实现自适应布局。
rem布局：根据根元素的字体大小（rem）调整布局。
响应式布局：结合多种布局方式，根据屏幕分辨率自动调整。

5.像素单位和比例

物理像素和设备独立像素：前者是屏幕上的实际像素点，后者是用于逻辑上的布局。
像素密度和像素比：指屏幕上每单位面积内的像素数量，影响图片和元素的清晰度。

6.事件处理

触摸事件：包括touchstart、touchmove和touchend等。
事件穿透问题：在快速点击或滑动时，事件可能无法捕获，需特殊处理。

7.真机调试

本地服务器：通过创建本地服务器并在真机上访问调试页面。
开发者工具：利用Chrome等浏览器提供的模拟环境进行调试。

8.性能优化

压缩资源文件：减小JS和CSS文件体积。
使用CDN和缓存：提升资源加载速度。
图片优化：使用现代格式如WebP，并适当压缩。

二.移动端排静态网页的步骤

移动端布局方式：

做到多手机屏幕适应网页的效果，要以rem布局为主 弹性布局以及流式布局 为辅

1.首先在html中引入meta标签

作用： 确保页面在不同设备上全屏显示且不缩放。

2.动态设置html中的font-size的值

（1）作用：

确保在任何手机屏幕上都能正常显示

（2）代码

document.documentElement.style.fontSize = document.documentElement.clientWidth * 10 / 750+ 'px'
1

（3）参数解释：

document.documentElement.style.fontSize： ：指的是动态设置html中的font-size的值
document.documentElement.clientWidth：指的是对应手机的总宽度
10： 指的是想要设置的font-size的值。一般为10或者100----方便计算
750：指的是设计图的总宽度

3.正常排网页

（1）注意：

pc端（电脑端）经常用的是px来量就直接去写
移动端 要将量来的 px 转为 rem 去写，并且在网页布局的这一方面多用flex布局，可以多手机使用