# WebApp-SassRem-Test

**Repository Path**: yzcheng/WebApp-SassRem-Test

## Basic Information

- **Project Name**: WebApp-SassRem-Test
- **Description**: 利用sass函数动态计算rem达到移动web适配开发 练习
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-11-23
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# WebApp-SassRem-Test

### 利用scss函数动态计算rem达到移动web适配开发 练习




> rem原理与简介

字体单位：值根据HTML根元素大小而定，同样可以作为宽度，高度等单位。

适配原理：将px替换成rem，动态修改html的font-size适配。

兼容性：IOS6以上和Android2.1以上，基本覆盖所有流行的手机系统。





根据屏幕宽度变化px动态转换对应rem:

使用scss中的
> @function函数 

定义iphone6=375为基础尺寸

```
@function px2rem($px) {
  //iphone6 375*667 宽度
  //$rem: (375px/10);
  $rem: 37.5px;
  @return ($px / $rem) + rem;
}

.header {
  height: px2rem(40px);
}

```



根据屏幕宽度变化动态设置html的font-size：

var htmlWidth=document.documentElement.clientWidth || document.body.clientWidth;//获取视窗宽度
var htmlDom=document.getElementsByTagName('html')[0]; //获取html,以便对其进行操作
htmlDom.style.fontSize=htmlWidth/10+'px';//html的font-size是屏幕宽度的十分之一


最后


利用媒体查询 @media 实现 pc/移动 多端适应开发

```
.header {
  ...
  @media (min-width: 769px) {
    height: px2rem(15px);
  }
}
```





![输入图片说明](https://images.gitee.com/uploads/images/2018/1123/180517_07b85218_2161043.png "6fe37ad4b4b2d939ab4043ce4848425.png")

![输入图片说明](https://images.gitee.com/uploads/images/2018/1123/180531_6ab64c14_2161043.png "d50a55e69d6e029d4109eae7fa0a50c.png")