zoukankan      html  css  js  c++  java
  • 微信小程序填坑之路(三):布局适配方案(rpx、px、vw、vh)

    因为小程序是以微信为平台运行的,可以同时运行在android与ios的设备上,所以不可避免的会遇到布局适配问题,特别是在iphone5上,因为屏幕尺寸小的缘故,也是适配问题最多的机型,下面就简单介绍几种适配方法。

    rpx适配

    rpx是小程序中的尺寸单位,它有以下特征:

    • 小程序的屏幕宽固定为750rpx(即750个物理像素),在所有设备上都是如此
    • 1rpx=(screenWidth / 750)px,其中screenWidth为手机屏幕的实际的宽度(单位px),例如iphone6的screenWidth=375px,则在iphone6中1rpx=0.5px

    由上可知,在不同设备上rpx与px的转换是不相同的,但是宽度的rpx却是固定的,所以可以使用rpx作为单位,来设置布局的宽高。

    vw、vh适配

    vw和vh是css3中的新单位,是一种视窗单位,在小程序中也同样适用。

    • 小程序中,窗口宽度固定为100vw,将窗口宽度平均分成100份,1份是1vw
    • 小程序中,窗口高度固定为100vh ,将窗口高度平均分成100份,1份是1vh

    所以,我们在小程序中也可以使用vw、vh作为尺寸单位使用在布局中进行布局,但是一般情况下,百分比+rpx就已经足够使用了,所以它们的出场机会很少。




    转:  https://www.jianshu.com/p/fc08527604a1

  • 相关阅读:
    上篇用到的matcher函数
    lambdaj学习
    Redis高级应用——2
    Redis入门
    从gitee 下载代码到本地
    CSS中对图片(background)的一些设置心得总结
    nodejs 安装Ionic 和cordova
    Spring MVC内容协商机制详解
    基于Servlet3.0的编程式SpringMVC实例详解
    基于Junit的Spring集成测试方法
  • 原文地址:https://www.cnblogs.com/fps2tao/p/11098204.html
Copyright © 2011-2022 走看看