flexible.js完成rem适配
时间: 2024-05-07 16:18:56 浏览: 160
flexible.js实现移动端rem适配方案
flexible.js 是一个可以用于移动端的 JavaScript 库,它可以自动根据屏幕宽度调整 HTML 的 font-size,从而实现 rem 布局适配。使用 flexible.js 可以帮助我们在不同屏幕尺寸的设备上保持一致的布局效果。
使用 flexible.js 的步骤如下:
1.在 HTML 的 head 中添加以下代码:
```html
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script src="https://cdn.bootcdn.net/ajax/libs/flexible.js/0.3.2/flexible.js"></script>
```
2.在 CSS 中使用 rem 单位进行布局,例如:
```css
div {
width: 6rem;
height: 2rem;
font-size: 0.8rem;
}
```
在使用 flexible.js 之后,6rem 的宽度将会根据屏幕宽度自动调整,2rem 的高度和 0.8rem 的字体大小也将会自动适应。
需要注意的是,使用 flexible.js 进行 rem 布局适配时,需要将设计稿的尺寸转换为 rem,而不是像素。例如,如果设计稿的宽度为 750px,那么在 CSS 中设置 1rem 等于 75px,而不是 1px。这样就可以保证在不同屏幕尺寸的设备上都能够得到一致的布局效果。
阅读全文