-
让品牌有温度、有情感
专注品牌策划15年
移动端自适应（移动端自适应布局如何实现）
发布时间：2023-04-08 12:52:43
稿源：
创意岭 阅读：
110
大家好！今天让创意岭的小编来大家介绍下关于移动端自适应的问题，以下是小编对此问题的归纳整理，让我们一起来看看吧。
开始之前先推荐一个非常厉害的Ai人工智能工具，一键生成原创文章、方案、文案、工作计划、工作报告、论文、代码、作文、做题和对话答疑等等
只需要输入关键词，就能返回你想要的内容，越精准，写出的就越详细，有微信小程序端、在线网页版、PC客户端
创意岭作为行业内优秀的企业，服务客户遍布全球各地，如需了解SEO相关业务请拨打电话175-8598-2043，或添加微信：1454722008
本文目录:
一、vue3.0+vite实现移动端自适应布局
然后再main.ts中引入amfe-flexible
最后启动项目就会发现px已经是自适应的单位,如果想用原来的px只需改成大写的PX单位即可
二、vue移动端高度自适应 100vh不够
有时候会使用100vh，刚进入页面时是合适的，但是若果页面高度是动态添加的，那么当页面实际高度超过100vh的时候，100vh的高度设置就不够了。
例如：
↑此时外部容器为100vh 刚好合适
↑但是我添加步骤 高度超过100vh 就不够了
解决办法：
在app.vue中设置
#app{
height: 100%;
}
html,body{
height: 100%;
}
在你要适配的页面，将父容器的高度设为：
}
如果你的背景是一张图片，那么就这样：
#home {
width: 100%;
height: 100%;
overflow: scroll;
background-color: rgb(26, 28, 35);
background-image: url("../assets/bg.png");
background-size: 100%;
}
三、finebi如果是发电脑店的链接,移动端查看可以自适应屏幕吗
发电脑店的链接在移动端进行查看会，在手机显示上会显示过小或者是过大，不可以自适应屏幕，它有的端口就是开发的时候没有预留自适应屏幕。
四、拿到一份设计稿，我该如何进行移动端开发？
本文首发掘金： https://juejin.im/post/5d736747e51d4561ff66688c
出来混，那些混过去的，迟早是要还的 (￣Д ￣)┍ 。
让我们来解决几个问题：
提到 viewport ，之前总感觉挺突兀的，但是当我最近做移动端项目时，突然关注到一直被忽略的 meta 标签的时候，才恍然大悟（o(╯□╰)o）。那么，首先让我们来了解一下 meta 标签☛ 一直被忽略的meta标签了解一下 ，之后再去看 viewport ，就很容易记住了，不就是 meta 标签中 name 属性的一个值嘛。
那么， 它的作用是啥呢？要了解它具体的作用，我们需要先来了解一些相关的基本知识。
viewport 指浏览器的窗口，即浏览器上用来显示网页的那部分区域，是用户网页的可视区域。
在移动端和pc端，视口是不同的。pc端的视口是浏览器窗口区域，而在移动端则有三个不同的视口概念： 布局视口 、 视觉视口 、 理想视口 。
（👉 viewport移动端适配 、 关于移动端适配，你必须要知道的 ）
上面这个基本的设置：
🌟 viewport 属性的 作用 ，就是让 布局视口 通过缩放来适配屏幕宽度， width=device.width 仅仅是让 布局视口 初始大小等于设备宽度，后面设置的 initial-scale 是用来缩放 布局视口 大小，而且默认是 布局视口 初始大小等于设备宽度，也就是所谓的 理想视口 。
将设计稿转化为手机屏幕上的内容，就类似于画地图，按照一定的比例进行缩小绘制：
dpr ( device pixel ratio) ：设备像素比，即设备物理像素与逻辑像素(css像素)的比例。
【设计稿】：设计师给的 750px 宽的设计稿是根据 设备像素 （ device pixel，物理像素 ）为单位制作的设计稿。
【web页面编写】：前端工程师在编码 web 页面时所写的 CSS 像素 则需要根据 设备像素比 来进行换算。
缩放会影响 布局视口 的大小，当我们在移动端对页面进行放大和缩小时，实际上是在改变 CSS 像素的大小，而 scale 缩放的目的就是为了使 CSS 像素适应移动端的设备像素 ，而这个缩放是通过两个关键的元素设置来实现的：
width=device-width,initial-scale=1/dpr
做的事情就是先把布局视口放大dpr倍，然后再整体缩放相应倍数以适应设备尺寸，这样就能够使css像素和设备物理像素一对一了。
淘宝方案中采用了dpr用于解决1px的问题，而网易方案并没有引入dpr，布局视口没有放大，整个页面也没有缩放，但是并不影响与设计图的比例。
➹ 真的，移动端尺寸自适应与dpr无关
➹ 详解适配相关概念
明白了上述几个问题了之后，我们就掌握了移动端自适应的精髓，从而可以进行实战开发了。
通过上面的 rem 换算，我们能够知道，如何把视觉稿（ 750px ）中元素的 px 转换成 rem 。
（1）设置 html font-size，如将手机屏幕分成10份：
（2）假设元素宽度为 300px ，则元素宽度：
可以通过以下的方案来实现自动转换：
✔ Scss 方案
✔ vscode 中进行 px 到 rem 的转换： vscode-cssrem
✔ postcss-pxtorem 方案
点击 DEVICE METRICS 查看更多终端设备的参数。
以上就是关于移动端自适应相关问题的回答。希望能帮到你，如有更多相关问题，您也可以联系我们的客服进行咨询，客服也会为您讲解更多精彩的知识和内容。
推荐阅读：
赣公网安备 50019002502384号
