adaptive H5 端自适应框架

开源网站开源项目 24-05-13 10:57:01

adaptive是一个 H5 端自适应框架。

使用方法:

<scriptsrc="js/adaptive.js"></script><script>window['adaptive'].desinWidth=640;//设计图宽度window['adaptive'].baseFont=18;//没有缩放时的字体大小window['adaptive'].init();//调用初始化方法</script>

然后在css中设置相应样式即可:

.main-info{height:0.88rem;padding-bottom:0.24rem;}.fund-info{position:relative;font-weight:normal;padding:0.2rem0;padding-right:1.7rem;padding-left:0.23rem;font-size:0.32rem;line-height:1;}

adaptivejs原理:

利用rem布局,根据公式

html元素字体大小 = document根节点(html)宽度 * 100 / 设计图宽度

设置html元素的font-size,然后根据设计图大小/100即为css大小。比如一个div设计图宽度为89px,那么在 css 中可以这样书写:width:0.89rem; 如果是文字,也建议使用rem。 对于iphone的retina高清显示屏,做了缩放处理,以达到最佳显示效果。

注意:如果设计图宽度大于document的宽度,0.01rem将小于1px,故如果设计图是1px,在css中仍然用1px显示。

可用的全局变量:window.devicePixelRatioValue 当前页面设置的设备像素比

[adaptive H5 端自适应框架]相关推荐

jav8 V8 的 Java 封装

jav8 实现了 Google 的 V8 JavaScript 引擎的 Java 封装. 支持跨平台。 使用方法: ScriptEngineManager ……...

XData 数据验证工具

XData 一款非常实用的数据验证工具, 通常用于数据的验证. 特性 验证数据一步到位 容易扩展,容易自定义数……...

MWT J2ME 的 UI 工具包

MWT J2ME 的 UI 工具包

Micro Window Toolkit(MWT)是一个用于开发J2ME用户界面(UI)的工具包。它具有友好,强大,快速,开源等特……...

blas 开发包收集器

blas 是一款开发包收集器,为 Go 语言提供BLAS功能。 安装: gogetgithub.com/gonum/blas BLAS C-绑定: ……...

今日开源
  1. Atomic 运行 Docker 容器的原型系统

    Atomic 是一个用于运行 Docker 容器的原型系统,使用不可变的基础设施来部署和扩展你的容器化应用。该项目主要包括 Atomic Host、Team Silverblue 和各种容器工具。 Atomic的目标是提供一个高层次的、连贯的系统入……

    开源软件 2024-05-17

  2. FlexBox jQuery下拉框插件

    FlexBox jQuery下拉框插件

    FlexBox 是一个 jQuery 插件用来显示动态下拉框,下拉数据可直接进行翻页显示,使用的是 JSON 格式的数据源。 It can be used as a: ComboBox, with per-result html templates Suggest box, like Google's searc……

    开源软件 2024-05-17

  3. Rubick 基于 electron 的开源工具箱

    Rubick 是一个基于 electron 的工具箱,媲美 utools 的开源插件,已实现 utools 大部分的 API 能力,所以可以做到无缝适配 utools 开源的插件。 之所以做这个工具箱一方面是 utools 本身并未开源,但是公司内部的……

    开源软件 2024-05-17

返回顶部小火箭