flexible.js如何计算，flexiblejs 怎么使用

移动端H5页面适配问题研究

传统桌面web页面布局通常是定宽布局，但是定宽布局的方式对移动端却不适用，原因手机屏幕尺寸大小各异，定宽布局可能在某些手机上出现横向滚动条，导致阅读效果比较差。

移动端web页面的开发，由于手机 屏幕尺寸 、 分辨率 不同，或者需要考虑 横竖屏 问题，为了使得web页面在不同移动设备上具有相适应的展示效果，需要在开发过程中使用合理的适配方案来解决这个问题。

，输入position：fixed；top：0；left：0；将整个div固定在屏幕的顶部和左侧。

相关问答

Q1: pc端设计稿是2560如何自适应其他屏幕

在不同分辨率下，页面布局存在不同程度的差异，特别是页面上的表单控件，其宽度默认是固定值width：150px，当分辨率较高时，表格中的空白显得过多，页面布局显得很不协调，在宽屏显示器上尤为明显。

无论是电脑还是手机，要做到自适应屏幕，其实都是一样的。

如果屏幕宽度在400像素以下，则6张图片分成三行。如何设计自适应屏幕大小的网页(转)上面有更多这样的例子。这里还有一个测试小工具，可以在一张网页上，同时显示不同分辨率屏幕的测试效果，我推荐安装。

这个时候，我们可以先完成一个分辨率下的css样式表。然后在这个基础之上，对其他分辨率进行调整即可。这个过程我们只需要调整一些参数即可。

首先，在网页代码的头部，加入一行viewport元标签。

第三方库用的一般是使用px单位，无法使用rem适配不同设备的屏幕。解决办法：使用px2rem-loader插件将第三方ui库的px转换成rem单位。

Q2: flexible.js,为什么两个相同页面,计算的font-size不同

flexiblejs中的字体本来就不使用px.而是使用rem。可以根据根节点的font-size的值动态的进行改变。

flexible.js手淘框架，是一个用来适配移动端的js框架。手淘框架的核心原理就是根据不同的width给网页中html跟节点设置不同的font-size，然后所有的距离大小都用rem来代替，这样就实现了不同大小的屏幕都适应相同的样式了。

以rem作为字体单位：我们可以让页面整体的文字，也跟随着html的font-size来进行改变，这样，在不同的屏幕下，可以做到文字相对屏幕的比例是一样的。以px作为字体单位： 这个是目前很多网站还是依然采用的方法。

上面的代码指定，字体大小是页面默认大小的100%，即16像素。h1 { font-size： 5em；} 然后，h1的大小是默认大小的5倍，即24像素（24/16=5）。

关于flexible.js如何计算和flexiblejs 怎么使用的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。