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

一.移动端涉及的知识

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 小时前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人1 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人1 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼3 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風7 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#