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

  • 时间:
  • 浏览:1

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

完后 3200px的屏幕就能只有容纳10200px宽的内容了。

以上代码我上放去

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

顶端,在html标签渲染前就现在现在开始 英语 设置。

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

一现在现在开始 英语 就根据DPR设置initial-scale,完后 在onresize顶端设置html字体大小。

大伙会注意到onresize顶端有完后 一段代码:

你這個段代码是为了兼容一次责旧款机器,那些机器无法正常的获取到DPR值,这样大伙就只有设置屏幕页面内容宽度为设备宽度。

能只有设置屏幕宽度为10200px, 设置viewport属性initial-scale = 1/3;

手机浏览器是把页面上放去有有俩个虚拟的"窗口"(viewport)中,通常你這個虚拟的"窗口"(viewport)比屏幕宽,完后 就无需把每个网页挤到很小的窗口中(完后 会破坏这样针对手机浏览器优化的网页的布局),用户能只有通过平移和缩放来看网页的不同次责。

首先大伙简单了解下css目前都支持那些单位:

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

从能只有只有看出,要做页面整体弹窗缩放语录,使用rem, vm, vw, vh更适合,不可能 任何内容都能只有找到同有有俩个基准。

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

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

假如有一天每个手机的分辨率全部都是一样,这样何如来设置你這個你這個initial-scale呢?大伙能只有通过以下最好的妙招:

不可能 屏幕分辨率宽是10200px,屏幕宽度为3200px,这样DPR=10200/3200=3。

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

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

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

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

200ppi:每英寸200个像素点

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

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

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