# rem-layout **Repository Path**: cuitzhy/rem-layout ## Basic Information - **Project Name**: rem-layout - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2020-05-06 - **Last Updated**: 2022-07-15 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # rem 布局构造函数 平时用到的 rem 布局构造函数 支持 es ```js // es6的方式 // 越早引入这个js越好 import RemLayout from '@yeung2017/rem-layout'; new RemLayout(750, { maxLayoutWidth: 750, remUnit: 100, }); ``` 如果想通过 script 引用,可以使用 dist/RemLayout.iife.js ```html Demo

标题

1234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 一段内容

1234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 一段内容

1234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 一段内容

1234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 一段内容

1234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 一段内容

1234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 一段内容

1234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 一段内容

1234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 一段内容

``` ## demo [demo](http://cuitzhy.gitee.io/rem-layout/test.html) ## 方法列表 ### RemLayout - 初始化 Rem 布局 - 用于移动端根据 设计稿宽度 等参数计算 html 元素的 font-size,并且可以设置最大的显示宽度以避免在 PC 端全部显示时"布局过大"的问题。 #### 引入版本 1.0.0 #### 参数 - [number]\(designWidth): 设计稿的宽度 - [options]\(Object): 选项对象 - [options.maxLayoutWidth]\(number): 最大的展示宽度,有时候在 PC 端不需要铺满显示,可以设置这个属性,详细使用方法参考 demo(要在 css 中设置一个最大核心宽度为 options.maxLayoutWidth 的 wrapper,如 demo 中的 .wrapper--max-width) - [options.remUnit]\(number): 1rem 在设计稿上对应多少 px,默认为 designWidth 的 10 分之一,好和 px2rem 配合使用.比如 750 的设计稿对应的 remUnit 默认为 75,此时设计稿上的 750px 转换为 rem 就是 10rem.如果没有使用 px2rem 等插件把 px 转换为 rem,则可以把 remUnit 设置为 100,则可以轻松口算出 354px 为 3.54rem - [options.autoResize=true]\(boolean): 当窗口大小改变的时候是否自动刷新 fontSize,默认为 true #### 返回 (RemLayout):remLayout 的实例