rem布局中需要引入什么js吗

JavaScript08

rem布局中需要引入什么js吗,第1张

不需要,rem只是css3的一个新的长度单位,与js无关,所以不需要引入任何js。如下面的例子就是rem的使用方法的简单例子:

<style>

html,h1{font-size:12px}

p{font-size:2rem}

</style>

<h1>下面的文字将是html定义的字体大小的2倍:</h1>

<p>我是html定义的12px的2倍,字体大小为24px</p>

1、rem介绍

rem(font size of the root element)是指相对于根元素(即html元素)的字体大小的单位。

假设根元素的字体大小是10px, 则5rem的大小为 5*10=50px,例如

2、rem来做适配

以前我们往往这样做页面:viewport width 设置为 device-width,然后选我们需要兼容设备的最小宽度(一般是320px)。根据这最小宽度来做页面。单位使用px和百分比。在宽度不同的设备上,页面的字体大小,内容尺寸都是一样的,不同的是,大屏的内容间的空隙比小屏的大。所以这样做的缺点就是,页面在某些尺寸的设备上显示的效果不好。    

如果用rem来页面,我们会根据不同的设备宽度在根元素上设置不同的字体大小。宽度越宽,字体越大。然后对原本使用px的地方使用rem来替换。这样,字体大小,内容尺寸,对随着屏幕宽度的变大而变大。

3、具体做法

1 根据不同的设备宽度在根元素上设置不同的字体大小。

我一般会设置1rem为1/10屏幕宽度。代码如下

2 做页面时

我一般会将设计稿缩小至宽度为320px(切图标时,还是按照原图来切)。在上一步中,1rem为1/10屏幕宽度。因此,px与rem的转化为 1px = 1 / 320 * 10rem。如果使用Sass可以用如下的转化代码

3 然后,在其他文件中,类似如下进行调用

4 生成的CSS

1、创建一个名称为fontsize的html文件。

2、在body中加入p元素和button按钮。

3、在自定义函数中创建一个字符串。

4、用fontsize方法设置字符串的字号为5号。

5、将返回的5号字符串赋值到p元素中。

6、在浏览器中运行该文件点击button查看返回5号字号的字符串。