如何使用flexible.js+rem
时间: 2023-08-01 20:07:18 浏览: 123
flexible.js实现移动端rem适配方案
首先,需要在HTML的<head>标签内引入flexible.js文件,例如:
```html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
<script src="path/to/flexible.js"></script>
</head>
```
然后,在CSS文件中使用rem作为单位,例如:
```css
.selector {
font-size: 1rem;
padding: 0.5rem;
}
```
在这里,1rem代表的是页面的根元素字体大小,而不是固定的像素大小。而flexible.js会根据设备的屏幕宽度动态设置根元素的字体大小,从而实现页面的自适应。
需要注意的是,在使用rem作为单位时,需要考虑到不同屏幕的像素密度(即设备像素比),可以使用媒体查询来针对不同的设备像素比设置不同的根元素字体大小,例如:
```css
@media only screen and (min-device-pixel-ratio: 2) {
html {
font-size: 40px;
}
}
```
这里的@media查询会在设备像素比为2或以上时,将根元素字体大小设置为40px。这样,使用rem作为单位时,不同像素密度的设备都能够正确地显示页面。
阅读全文