小程序屏幕适配及静态资源

最新推荐文章于 2024-01-21 00:01:18 发布
最新推荐文章于 2024-01-21 00:01:18 发布
阅读量540 收藏
点赞数
文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ybittersweet/article/details/129065319
版权

一。rpx可以根据屏幕宽度进行自适应。小程序专有的单位，它规定所有屏幕宽均为750rpx。

在这里插入图片描述
​
一句话：开发小程序时所有屏幕宽度都是 750rpx。
如果ui没有给750，可以拒绝，要750的图

swiper有默认值150px

二。静态资源

错误的原因是微信官方要求小程序代码包体积不允许超过 2M，其中图片资源占用了较大部分空间，然而实际项目中图片资源都是通过服务器返回，而非本地资源，所以 2M 的大小可以满足大部分的需求。
忽略静态资源（使用链接加载图片时）
在这里插入图片描述

Ybittersweet
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序开发中的多端兼容与适配
吃不胖.
05-08 451
在上面的代码中，.container元素的宽度和高度使用了750rpx单位，这样可以保证在不同设备上的屏幕宽度和高度自动适配。1.2. 功能兼容：微信小程序提供了一套跨平台的API接口，开发者需要根据不同平台的功能支持情况，选择合适的API接口来实现功能，并针对不同平台进行适配。1.1. 布局适配：根据不同设备的屏幕大小和分辨率，进行灵活的布局适配，确保页面在不同设备上的显示效果一致。1.4. 代码适配：根据不同平台的特性和要求，编写合适的代码，确保在不同平台上的性能和稳定性。
微信小程序：适配手机屏幕宽高度的设置方法
热门推荐
weixin_40807080的博客
11-06 1万+
我们在做小程序页面时常常会需要设置背景，而不同手机的屏幕宽高度并不一样，虽然设置宽度为750rpx来解决宽度自适应的问题，但高度却没有这种方法，下面来简单介绍一下设置高度自适应的方法： 一、750rpx自适应宽度 rpx是小程序自带的衡量尺寸，可以根据屏幕宽度进行自适应，750rpx则设定为手机页面宽度。而不同的手机屏幕大小750rpx对应的px不同，如iphone6的宽度是375px，在ipho...
微信小程序适配方案
是一座岛
06-27 8361
一. 概述 习惯了写pc端项目，会经常考虑到适配的问题，写响应式布局。拿到微信小程序的设计图时候，有点懵，不知道px和rpx是如何规则转换的，写的很慢，感觉没有找到法门，不顺手。又仔细阅读了文档规则，大彻大悟，很简单。 二. 名词 物理分辨率 = 设备像素 = 物理像素 逻辑分辨率 = 逻辑像素 = css像素 = 独立像素 ，肉眼感知尺寸 设备像素比 = 物理分辨率 / 逻辑分辨率 ...
微信小程序自适应方法
gdutRex的博客
07-06 1万+
微信小程序适配适配？如何适配原理rpx如何利用rpx图片适配元素布局其他总结 适配？ 由于每一个手机屏幕大小尺寸不一致，这就导致了小程序页面显示的差异存在，为了尽量避免因为尺寸而出现的界面混乱。 如何适配 原理 我们以每一个屏幕宽度为标准尺，通过比例计算获取相应的大小和位置。这样可以尽可能适配各种机型，但是如果面对差距比较大的设备，如PC、ipad等，就需要考虑不同设备的适配方案。一般都是可以获取...
H5嵌入小程序适配方案
nihaio25的博客
01-21 2441
本文是针对是把h5应用嵌入其它平台得流程。不是单独taro发布一个小程序，单独打包成app得流程，是从一个主平台直接进入一个子系统得嵌入适配方案。
微信小程序之移动端适配
weixin_45389051的博客
03-15 2232
一.物理像素 1.屏幕的分辨率 2.设配能控制显示的最小单元，可以把物理像素看成是对应的像素点 二.设备独立像素 & css像素 设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用并控制的虚拟像素(比如:css像素，只是在android机中css像素就不叫“css像素”了而是叫“设备独立像素”)，然后由相关系统转换为物理像素 三.dp...
快递包裹物流小程序前端静态模板
06-02
快递包裹物流小程序前端静态模板是专门为快递、包裹和物流服务设计的一款微信小程序的前端界面模板。这个模板提供了用户友好的界面，便于用户跟踪他们的快递包裹的物流信息，从而提升用户体验和业务效率。作为一款...
仿礼物说小程序图片素材资源
03-15
小程序项目一般包含pages、utils、app.js、app.json等核心文件夹和文件，而静态资源如图片通常会放在单独的assets或images文件夹下，便于管理和引用。 3. **图片引用方式**：在小程序中，图片引用通常是通过相对...
大宅小屋拼团.zip微信小程序模板源码纯前端静态小程序源码
02-23
源码中可能包含了一些针对不同屏幕尺寸和设备特性的处理，学习这部分内容能帮助我们更好地打造跨设备兼容的小程序。 综上所述，“大宅小屋拼团”微信小程序模板源码是一个宝贵的教育资源，涵盖了前端开发、微信小...
北斗团抖音小程序前端.zip
02-25
这个项目可能包含实现抖音小程序功能的各种文件，包括但不限于JavaScript、JSON配置文件、WXML（微信小程序标记语言）和WXSS（微信小程序样式表）文件，以及可能的图片、字体等静态资源。 在学习和研究这个源码的...
婴幼儿奶粉企业小程序前端源码
最新发布
06-03
婴幼儿奶粉企业小程序前端源码是针对这一特定行业定制的小程序应用的前端代码资源。这个源码包含四个主要页面，分别是首页、产品详情页、资质展示页以及联系页面，旨在为婴幼儿奶粉企业提供一个线上展示和互动的平台...
微信小程序源码-静态商城【推荐】
05-29
微信小程序源码-静态商城【推荐】，下载后可以直接使用
微信小程序底部tab-bar组件，高度还原微信原生tabBar功能及样式，且兼容iPhone异形全面屏
07-24
微信小程序底部tab-bar组件，高度还原微信原生tabBar功能及样式，且兼容iPhone异形全面屏，主要用于解决微信官方tabBar在遮罩层下无法被遮住的问题
微信小程序填坑之路：布局适配方案（rpx、px、vw、vh）
Purpletaro的专栏
07-15 2575
因为小程序是以微信为平台运行的，可以同时运行在android与ios的设备上，所以不可避免的会遇到布局适配问题，特别是在iphone5上，因为屏幕尺寸小的缘故，也是适配问题最多的机型，下面就简单介绍几种适配方法。 rpx适配 rpx是小程序中的尺寸单位，它有以下特征： 小程序的屏幕宽固定为750rpx（即750个物理像素），在所有设备上都是如此 1rpx=（screenWidth / 750）px，其中screenWidth为手机屏幕的实际的宽度（单位px），例如iphone6...
微信小程序固定底栏适配全面屏
qq_34815528的博客
05-17 754
如果你的小程序页面按钮有用fixed定位到底部的话，那你一定会遇到兼容全面屏的坑（与底部横条重叠）。查了下文档，发现能用的就只有一个api 而已。 下面准备封装全局app.js方法 JavaScript /** * 判断设备是否为全面屏 */ checkFullSucreen: function () { const self = this wx.getSystemInfo({ success: function (r...
微信小程序全面屏适配（获取导航栏和状态栏高度）
奋斗吧灬青年的博客
10-21 3091
let systemInfo = wx.getSystemInfoSync(); //状态栏高度 let statusBarHeight = Number(systemInfo.statusBarHeight); let menu = wx.getMenuButtonBoundingClientRect() //导航栏高度 let navBarHeight = menu.height + (menu.top - statusBarHeight) * 2 //状态栏加导航栏高度 let navSta.
微信小程序分包
weixin_42959207的博客
11-22 992
某些情况下，开发者需要将小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。 在构建小程序分包项目时，构建会输出一个或多个分包。每个使用分包小程序必定含有一个主包。所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据开发者的配置进行划分。 在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，...
微信小程序屏幕适配小屏幕和ipad大屏全攻略
Grance的技术之路
03-19 8326
i我们在开发小程序的时候时常会遇到界面适配的问题，如果统一使用rpx布局会造成在ipad等大屏幕上字体过大，导致视觉效果不佳等问题，如果统一使用px又会使iphone5等小屏幕上字体和距离过大，布局无法适配等问题。那么我们怎么找到更优的解决方案呢？
小程序 750rpx、calc()
qq_46302247的博客
02-13 475
在iPhone6上，如果要绘制一个宽为100px，高为30px的盒子，换算成rpx单位，宽高分别为200rpx 和 60rpx
小程序静态资源cdn
04-18
小程序静态资源CDN（Content Delivery Network）是一种用于加速小程序静态资源加载的技术。CDN通过将静态资源分布在全球各个节点服务器上，使用户可以从离自己最近的节点服务器获取资源，从而提高资源加载速度和用户体验。 在小程序中使用CDN可以带来以下好处： 1. 加速资源加载：CDN可以将静态资源缓存在离用户最近的节点服务器上，减少网络延迟，提高资源加载速度。 2. 节省带宽成本：CDN可以缓存静态资源，减少对源服务器的请求，降低带宽消耗和服务器压力。 3. 提高稳定性和可靠性：CDN具有分布式架构，可以提供更好的稳定性和可靠性，减少单点故障的影响。 在小程序中使用CDN可以通过以下步骤实现： 1. 将小程序的静态资源（如图片、样式文件、脚本文件等）上传到CDN提供商的服务器上。 2. 在小程序的代码中使用CDN提供商提供的资源链接来引用静态资源。 3. 用户访问小程序时，会从离用户最近的CDN节点服务器获取静态资源，加快加载速度。 常见的小程序静态资源CDN提供商有七牛云、腾讯云、阿里云等。你可以根据自己的需求选择适合的CDN提供商，并按照其提供的文档和指引进行配置和使用。

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值