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

一.移动端涉及的知识

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">

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

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'

（3）参数解释：

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

3.正常排网页

（1）注意：

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