通过 Sass 动态设置 rem
移动端我们一般是根据 iPhone6 的 375 来进行开发的
ex:
JS 文件:
- let htmlWidth = document.documentElement.clientWidth || document.body.cilentWidth;
- // 获取视窗高度
- let htmlDom = document.getElementsByTagName('html')[0];
- htmlDom.style.fontSize = htmlWidth / 10 + 'px';
- // console.log(htmlWidth,htmlWidth / 10);
- // 动态修改 font-size
- Windows.addEventListener('resize',()=>{
- let htmlWidth = document.documentElement.clientWidth || document.body.cilentWidth;
- let htmlDom = document.getElementsByTagName('html')[0];
- htmlDom.style.fontSize = htmlWidth / 10 + 'px';
- })
在 vscode 中编写 Sass 文件:
- @function px2rem($px) {
- $rem:37.5px;/* 基准值 iphon6 375/10 */
- @return ($px / $rem) +rem;
- }
- /* 以 iPhone6 为主 设计给的尺寸要比实际大两倍 */
- HTML{
- background: #f8f8f8;
- }
- .header{
- width: 100%;
- height: px2rem(40px);
- background: red;
- .header-content{
- display: flex;
- justify-content: space-between;
- align-items: center;
- height: px2rem(40px);
- padding: 0 px2rem(23px);
- .header-item{
- color:#ffcdce;
- font-size: px2rem(16px);
- &:nth-child(2){//&: 等同于父元素
- color: #fff;
- font-size: px2rem(17px);
- }
- }
- }
- }
- rem
来源: http://www.bubuko.com/infodetail-3230873.html