手机端页面布局的适配

最新推荐文章于 2023-11-03 09:25:44 发布

过了个羊

最新推荐文章于 2023-11-03 09:25:44 发布

阅读量367

点赞数

文章标签：前端 html css

本文链接：https://blog.csdn.net/weixin_70426591/article/details/127434135

版权

开发手机页面，不会根据设计图的大小来写一个固定的值，手机端的像素单位不用px用rpx，可以先通过uniapp的一个api获取可使用窗口的高度和宽度。

uni.getWindowInfo()获取窗口信息下面两个参数都会返回

windowWidth	number	可使用窗口宽度
windowHeight	number	可使用窗口高度

通过设计图的宽度除以aip获得的窗口的宽度获取他们的比例，然后再用aip获取得高度乘以比例就是手机的可视区域。

ui-width / app-width = 比例

ui-height * 比例 = app-height

转换后的高度要用rpx单位

优惠劵

过了个羊

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
手机端页面布局的适配

手机端页面布局的适配
复制链接

扫一扫

手机端h5页面适配+预加载+获取资源加载进度模板

10-27

里面内容：通过js控制使页面整体缩放的方案，还有一个就是通过js实时检测屏幕大改变html根字体大小的rem布局方案。目前我在使用的是缩放的方案。整体代码基本上是整合的是大牛们分享的一些实用代码

uniapp 动态获取手机屏幕高度

weixin_44325832的博客

04-13

2512

动态获取元素高度

参与评论您还未登录，请先登录后发表或查看评论

uniapp微信小程序获取屏幕宽高

m0_55258023的博客

09-13

8944

uniapp微信小程序获取屏幕宽高

//调用uni-app接口获取屏幕高度

最新发布

m0_58358831的博客

11-03

141

【代码】//调用uni-app接口获取屏幕高度。

uni-app DAY08

qq_40185402的博客

12-09

667

uni-app中的模板，uni-app中的样式，uni-app中的脚本，uni-app应用中请求服务器端接口数据，重点面试题：uni-app中的生命周期方法，父子组件间传参，小知识：如何获取一个月份的开始时间和结束时间,uni-app页面跳转和传参,前端请求中的防抖,uni-app项目中使用地图,全端可用的图表组件库：uChart

uniapp学习API之——媒体、设备、键盘、界面、文件、绘画、

qq_42774794的博客

03-23

1146

从本地相册选择图片或使用相机拍照。

uniapp项目rpx和px单位转换，满足适配需求

weixin_61728046的博客

10-21

2369

uniapp项目rpx和px单位转换，满足适配需求

uni-app获取系统信息（手机牌子、手机型号、屏幕宽度、屏幕高度）

T3165919332的博客

07-04

2006

【代码】uni-app获取系统信息（手机牌子、手机型号、屏幕宽度、屏幕高度）

uniapp微信小程序获取屏幕宽高,胶囊按钮的位置以及Vue3.2在css层获取逻辑层的数据

前端菜鸟好先森的博客

12-16

4619

uniapp微信小程序获取屏幕宽高,胶囊按钮的位置以及Vue3.2在css层获取逻辑层的数据

vue-webapp-h5-template:Vue2.0 (Vue3.0 + TypeScript) + Lass + Vant + viewportrem 完整的移动端适配方案案例代码

05-01

在进行移动端页面开发时，屏幕适配是首要问题。移动端的界面开发并不像 PC 端那样简单，举个例子：在 PC 端开发时，我们可能给某个区域设置一个固定的安全宽度，这个宽度可能是 1200px 也可能是 1100px ，这样设计...

uni-app 用法总结

清心寡欲的博客

07-19

856

1、跳转页面 this.$tab.navigateTo('/pages/mine/info/index') 2、接收跳转页面的参数 this.$tab.navigateTo('/pages/mine/info/index?abc=ccc') 获取页面传递的参数 this.$route.query.abc 3、动态设置导航标题

跨终端响应式页面设计入门

02-20

跨终端/响应式页面不外乎是让各种分辨率的屏幕都能顺利阅读你的页面，常规来讲一个跨终端页面，在宽屏的电脑上看和在小屏幕手机上看的布局是不同的，布局不同的原因是为了让读者更好地阅读你的页面，见下图：这里有点要提到的是，我们常规会将PC版的页面和移动端设备的页面独立开来设计，这样会让PC端的页面布局更灵活和好维护。如果你希望你的页面能适配包括PC端在内的任何设备，那么下面几个小工具可以方便你顾及旧版本IE所存在的困扰：⑴IE8-不能识别HTML5的<hearder>、<article>、<footer>、<figure>等标签，可以通过html5.js来解决：然后将下面代码写入你的base.css来

仿京东移动端首页布局（固定尺寸、rem适配、vw适配）

08-23

仿京东移动端首页布局，包括固定尺寸布局、rem适配布局、vw适配布局，设计稿尺寸使用的iPhoneXR的414px * 896px。我们可以通过在不同移动端设备上展示移动端网页，发现固定尺寸布局的不足之处，以及rem适配、vw适配的原理。其中vw适配的网页css使用的是scss语法，使用了函数、变量、嵌套等语法。

解决vue移动端适配问题

12-11

1，先看看网上关于移动端适配讲解再聊移动端页面适配，rem和vw适配方案！基础点：rem相对根节点字体的大小。所以不用px; 根字体：字体的大小px; px：你就当成cm(厘米)这样的东西吧；基准：750设计稿；这是方案的基础理论，在这个基础上，我们还要搞明白，到底要干一件什么事情！目标一、手机适配：就是页面上的尺寸，无论高度，还是宽度，还有字体，随屏幕的宽度变化！这里是屏幕宽度！是不是想到了vw，对，就是这个意思；——最大程度在各个尺寸屏幕上还原设计稿目标二、px转换成rem：一般UI给的设计稿宽度大小是750，所以，我们想直接写上面UI标记的尺寸；——最大程度减少工作为什么

【无标题】移动端解决高度设为100vh时，页面超出窗口问题

qq_61834864的博客

10-31

3713

移动端解决高度设为100vh时，页面超出窗口，会产生滚动条问题

基于Vue3+Element编写的一款后台管理系统（兼容移动端）

02-16

vue-pure-admin 是一款开源免费且开箱即用的中后台管理系统模版。使用了最新的 Vue3、Vite、Element-Plus、TypeScript、Pinia、Tailwindcss 等主流技术开发。

关于手机端屏幕适配问题的注意事项及阿里高清方案运用实例--H5页面屏幕适配方案1

08-08

2.流式布局适配就是固定高度，宽度用百分比来设定元素和布局 3.利用第三方插件布局适配利用第三方的一些现成的前端框架（如:Bootstrap、jQueryUi等

浅谈pc和移动端的响应式的使用

12-14

身为一个前端攻城狮，是不是经常遇到各种各样的响应式问题...而如果用自适应布局去处理的话，那不管访问设备如何的不同（下图是三台尺寸不一样的手机），最后看到的页面内容和布局基本上还是一样的，就是尺寸略有不同。

uni-app DAY07

qq_40185402的博客

12-08

637

uni-app中的模板，uni-app中的样式，uni-app中的脚本，uni-app应用中请求服务器端接口数据，重点面试题：uni-app中的生命周期方法，父子组件间传参，小知识：如何获取一个月份的开始时间和结束时间,uni-app页面跳转和传参,前端请求中的防抖

elementui适配手机端

05-15

ElementUI是一个基于Vue.js框架的UI组件库，它并没有专门适配手机端的版本。但是，它的组件样式可以通过CSS样式覆盖来实现适配手机端的效果。以下是一些适配手机端的建议： 1. 使用响应式设计：使用媒体查询（Media Query）或者CSS框架（如Bootstrap）进行响应式设计，根据不同的设备屏幕大小调整ElementUI组件的样式。 2. 自定义主题：使用ElementUI提供的主题定制工具，自定义组件的颜色、字体、间距等属性，将其与手机端的UI风格保持一致。 3. 按需加载：使用按需加载的方式引入ElementUI组件，避免过多的资源加载，提升页面加载速度。 4. 调整布局：对于一些大屏幕的组件（如表格、表单等），需要调整其布局，使其在手机端能够更加友好地展示。总之，虽然ElementUI没有专门的手机端适配版本，但是通过一些小技巧和调整，我们可以让它在手机端上也能够展现出良好的效果。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交

手机端页面布局的适配

uni.getWindowInfo()获取窗口信息 下面两个参数都会返回

“相关推荐”对你有帮助么？

uni.getWindowInfo()获取窗口信息下面两个参数都会返回