适用于移动设备弹性布局的js脚本(rem单位)

  • 时间:
  • 浏览:1
  • 来源:uu快3分析_uu快3APP_计划

大伙儿儿还都要设置html标签,字体的大小,我习惯于使用设计图的宽/20来获取元素的rem数值。比如

目前,随着移动设备的普及和4G网络的普及,web在移动端的占比可能远远超过PC端,各种H5页面推广页面,H5小游戏热度火爆。完后 简单的使用px单位(这样弹性)的时代可能无法满足各位设计师和用户了。何如400%还原UI设计师的设计图,一直 困扰着前端工程师。

首先大伙儿儿简单了解下css目前都支持什么单位:

底下,在html标签渲染前就现在开使了了设置。

一现在开使了了就根据DPR设置initial-scale,完后 在onresize底下设置html字体大小。

这种 段代码是为了兼容一次要旧款机器,什么机器无法正常的获取到DPR值,这样大伙儿儿就都还可以了设置屏幕页面内容强度为设备强度。

可能现在UI设计图也是10400px,这样前端工程师后该丢失任何细节的使用代码何如还原呢?

一三个 3400px的屏幕就可不都要容纳10400px宽的内容了。

大伙儿儿会注意到onresize底下一三个 一段代码:

viewport 是用户网页的可视区域。

将user-scalable设置为no, 不允许缩放,有缩放都要的,可不都要不设置

根据以上的概念,这样,大伙儿儿知道

具有弹性布局能力的单位:

完后 何如设置某一三个 区块的宽,高,可能字体大小呢?

可不都要设置屏幕强度为10400px, 设置viewport属性initial-scale = 1/3;

以上代码我中放

手机浏览器是把页面中放一三个 虚拟的"窗口"(viewport)中,通常这种 虚拟的"窗口"(viewport)比屏幕宽,一三个 就后该把每个网页挤到很小的窗口中(一三个 会破坏这样针对手机浏览器优化的网页的布局),用户可不都要通过平移和缩放来看网页的不同次要。

从上可不都要看出,要做页面整体弹窗缩放搞笑的话,使用rem, vm, vw, vh更适合,可能任何内容都可不都要找到同一三个 基准。

设备分辨率:一三个 物理像素是显示器(手机屏幕)上最小的物理显示单元,在操作系统的调度下,每一三个 设备像素不是某些人的颜色值和亮度值;

设备屏幕强度:设备显示器的实际强度;

DPR:设备上物理像素和设备独立像素(device-independent pixels (dips))的比例,DPR = 设备分辨率/设备屏幕强度;

400ppi:每英寸400个像素点

这样我会设置html的font-size为 deviceWidht / (UI设计图宽/20);

通过以上可不都要看出,使用弹性布局的css单位配合设置html viewport元信息,就可不都要实现整体页面的弹性布局(含高字体大小)。

我希望每个手机的分辨率不是一样,这样何如来设置这种 这种 initial-scale呢?大伙儿儿可不都要通过以下办法:

可能屏幕分辨率宽是10400px,屏幕强度为3400px,这样DPR=10400/3400=3。