一.移动端涉及的知识
1.移动端与PC端的区别
屏幕大小不同 :移动设备的屏幕较小,通常以英寸表示尺寸,而PC端显示器较大。
交互方式不同 :移动端以触摸为主,而PC端使用鼠标和键盘。
网络环境不同 :移动端常常依赖不稳定的移动网络,而PC端多数情况下使用稳定的有线网络。
性能差异:移动设备的性能普遍低于PC,尤其是在处理器速度和内存容量上。
2.移动端页面布局
多机型适配 :移动端设备种类繁多,需要适应不同尺寸 的屏幕。
页面结构简单 :由于屏幕小,应避免复杂的页面结构。
核心思想 :不允许水平滚动条,整体宽度要与屏幕一致。
3.视口设置
viewport概念:移动端专有的用于显示网页的窗口,通过meta标签 设置。
常见设置:
html
<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)代码
javascript
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布局 ,可以多手机使用