-
让品牌有温度、有情感
专注品牌策划15年
移动端适配优化（移动端适配方案）
发布时间：2023-04-13 23:03:56
稿源：
创意岭 阅读：
82
大家好！今天让创意岭的小编来大家介绍下关于移动端适配优化的问题，以下是小编对此问题的归纳整理，让我们一起来看看吧。
开始之前先推荐一个非常厉害的Ai人工智能工具，一键生成原创文章、方案、文案、工作计划、工作报告、论文、代码、作文、做题和对话答疑等等
只需要输入关键词，就能返回你想要的内容，越精准，写出的就越详细，有微信小程序端、在线网页版、PC客户端
创意岭作为行业内优秀的企业，服务客户遍布全球各地，如需了解SEO相关业务请拨打电话175-8598-2043，或添加微信：1454722008
本文目录:
一、移动端的适配问题
什么是px
像素，相对于显示器屏幕的分辨率。
特点：固定大小，设置以后就不能因为页面改变而改变。
什么是pt
物理长度单位 1pt = 1px +1px*1/3
什么是em
相对长度单位，相对当前对象内文本的字体尺寸。
特点：em的值并不是固定的，em会继承父级元素的字体大小。
注意：浏览器默认字体大小16px。谷歌最小12px。
什么是rem
CSS3新增的一个相对单位（root em）相对于根节点html的字体大小来计算的。默认 1rem = 16px
特点：值只受到根节点html的字体大小影响，并不受父元素字体大小的影响。
rem适配
写在js的内容
(function(document,window){
let doc = document.documentElement,//获取根节点html
resizeEvent = "orientationchange" in window ? "orientationchange" :"resize",
resets = () =>{
if(doc.clientWidth>750){
doc.style.fontSize = "100px";
document.getElementById("root").style.width = '750px';
return
}
let fontSizeValue = doc.clientWidth/7.5;
doc.style.fontSize = fontSizeValue+"px";
document.getElementById("root").style.width = "auto";
}
if(!doc.addEventListener) return ;
window.addEventListener(resizeEvent,resets,false)
doc.addEventListener("DOMContentLoaded",resets,false)
})(document,window)
--------------------------------------------我是一条分割线--------------------------------------------
App
原生开发 ios
安卓
前端开发app dclould apicloud ---开发完移动端页面之后，进行打包apk文件
前端开发的原生app应用 ------ react-native flutter weex ----跨终端应用开发
混合开发 hybird 套壳开发 ------对于前端没什么太大工作 主要还是写移动端页面
h5页面-------webapp -----移动端网站
小程序开发
微信公众号开发
平台---
业务平台
后台管理
pc端的面向客户的网站
企业站
orientationchange 事件
当设备的方向变化（设备横向持或纵向持）此事件被触发。
js
//判断在window对象中是否有orientationchange属性
'orientationchange' in window
DOMContentLoaded 事件
当初始的 HTML 文档被完全加载和解析完成之后（不需要等待图片等其他资源加载完成），DOMContentLoaded 事件被触发。
load 事件
页面上所有的资源（图片，音频，视频等）被加载以后才会触发load事件，简单来说，页面的load事件会在DOMContentLoaded被触发之后才触发。
window.onload=function(){
}
document.onready
二、移动端适配概念 移动端适配方案(rem+@media) 视口
1.百分比单位；
2.vw 和 vh
3.媒体查询 + rem;
注意：不能使用px作为移动端适配的单位。
在高清屏下，1个css像素 1px 所占用的物理像素点是动态变化的，在高清屏中，同样是100px，此时
1px只是占用的像素点更多了而已。因此不管切换到什么样式的屏幕尺寸下，100px始终看起来就是
那么大，所以px不能作为适配单位。
物理像素：(设备像素)：一个设备的屏幕是由一个一个的小像素点组成的，设备出场时，屏幕有多
少个像素点构成是一定的
逻辑像素：(逻辑像素 css像素)：px，它是我们前端开发使用的一个单位
手机屏幕分为1倍屏，2倍屏，3倍屏
1倍屏：1px的css像素，对应1个物理像素点
2倍屏：1px的css像素，对应2个物理像素点
1.假设设计稿尺寸为 375px,我们将屏幕尺寸分为若干份，比如10份，
12份，15份，20份等。然后设置html的font-size,比如375px,评分15份，一份为25px,即html(font-
size:25px)
2. 假设设计稿尺寸为：375px,将设计稿中元素的尺寸转换为rem。虽然其他尺寸下元素的rem没有
变化，但是html的font-size是根据媒体查询在动态变化的，所以最终计算出来元素的尺寸也是动态
变化的。
px 换算 rem ：安装插件 px to rem & rpx(cssrem)
设置基准为font-size:375px/15等份
meta视口标签的主要作用：让布局视口的宽度和设备宽度保持一致，形成理想视口，
简单就是设备有多宽，布局视口就有多宽
三、移动端，PC端是怎么做适配的？
px：像素
em：一个 M 的宽度（面试：一个字的宽度）
rem：root em 根元素（ <html> ）的 font-size //oppo个别机型不适用
vh：view height，视口高度 100vh === 视口高度
vw：view width，视口宽度 100vw === 视口宽度
浏览器默认 font-size:16px;
Chrome浏览器默认最小字号为12px：font-size:12px;
所以一般情况下，rem 的font-size不要小于12px;
rem 就是 <html> 元素的 font-size，默认为 16px;(浏览器默认font-size)
rem和em 的区别：
1.meta viewport
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
2.媒体查询
更具查询结果选择不同的css样式,设置屏幕最大宽度，如果页面范围在这个宽度内就可以显示对应的CSS，以最大500为例
<style>
@media (max-width: 500px) {
......
}
</style>
3.动态 rem方案
一切单位以屏幕宽度为标准，就能完美还原设计稿。
动态REM思路：动态rem 采用整体缩放的思想，在页面渲染之前，使用JS获取设备宽度并设置rem(1rem == html font-size == viewport width)，之后的布局单位全部使用rem来实现整体缩放。
在使用动态 rem 布局的移动端页面中，很小的宽度如border-width 依然使用px，因为即使使用rem，当rem小于1px 时，依然会被浏览器当做1px 使用。
四、移动端seo适配怎么做
你好，以百度为例，现在百度都是推熊掌号，进入熊掌后找到搜索资源平台，如下图：
然后进入找到移动适配：
在说下怎么做：添加适配关系，有规则提交还有多规则，还有url对适配。如果你不大会写正则表达式，可以跟技术人员对接，让他们写出移动网站和pc网站链接的正则式，规则多久多写几个，如果链接规则比较乱，就用url对适配。
说下url对适配：
比如你是pc www.xxx.com
然后移动是 m.xxx.com
那么你可以找出有对应关系的移动和pc链接，比如说内容页，那么可以通过excel表排成 一 一对应关系提交
以上就是关于移动端适配优化相关问题的回答。希望能帮到你，如有更多相关问题，您也可以联系我们的客服进行咨询，客服也会为您讲解更多精彩的知识和内容。
推荐阅读：
BIOS安装Win11用UEFI启动（windows11安装bios设置）
赣公网安备 50019002502384号
