rem 布局构造函数
平时用到的 rem 布局构造函数 支持 es
// es6的方式
// 越早引入这个js越好
import RemLayout from '@yeung2017/rem-layout';
new RemLayout(750, {
maxLayoutWidth: 750,
remUnit: 100,
});如果想通过 script 引用,可以使用 dist/RemLayout.iife.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Demo</title>
<link
rel="stylesheet"
href="https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css"
/>
<style>
body {
font-family: 'STHeiti', 'Microsoft YaHei', Helvetica, Arial, sans-serif;
font-size: 0.32rem;
line-height: 1.5;
}
body * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.wrapper {
margin: 0 auto;
}
.wrapper--max-width {
/* 推荐设置为maxLayoutWidth */
max-width: 750px;
}
.wrapper--no-padding {
padding-left: 0;
padding-right: 0;
}
.header {
height: 0.88rem;
background-color: #f7f7f7;
border-bottom: 1px solid;
}
.title {
font-weight: normal;
font-size: 0.4rem;
line-height: 0.88rem;
text-align: center;
}
.example__img {
display: block;
width: 7.5rem;
height: 4rem;
margin: 0 auto;
}
.example__p {
font-size: 0.32rem;
}
.example__p--s {
font-size: 0.28rem;
}
.example__p--l {
font-size: 0.42rem;
}
.example__p--xl {
font-size: 0.46rem;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/@yeung2017/rem-layout@1.0.3/dist/RemLayout.iife.js"></script>
<script>
new RemLayout(750, {
maxLayoutWidth: 750,
remUnit: 100,
});
</script>
</head>
<body>
<div class="header">
<h1 class="title">标题</h1>
</div>
<div class="main">
<div class="wrapper wrapper--max-width">
<div class="example">
<img
class="example__img"
src="http://iph.href.lu/750x400?text=750*400"
alt=""
srcset=""
/>
<p class="example__p">
1234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
一段内容
</p>
<p class="example__p--s">
1234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
一段内容
</p>
<p class="example__p--l">
1234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
一段内容
</p>
<p class="example__p--xl">
1234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
一段内容
</p>
<img
class="example__img"
src="http://iph.href.lu/750x400?text=750*400"
alt=""
srcset=""
/>
<p class="example__p">
1234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
一段内容
</p>
<p class="example__p--s">
1234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
一段内容
</p>
<p class="example__p--l">
1234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
一段内容
</p>
<p class="example__p--xl">
1234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
一段内容
</p>
</div>
</div>
</div>
</body>
</html>demo
方法列表
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 的实例