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

一.移动端涉及的知识

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布局 ,可以多手机使用

相关推荐
活宝小娜1 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点1 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow2 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o2 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic2 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā2 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年4 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder4 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727574 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架
SoaringHeart4 小时前
Flutter进阶:基于 MLKit 的 OCR 文字识别
前端·flutter