根据实际的需求，我们的产品需要同时适配移动端和PC端
为了满足这个需求，我们可以按照以下思路来实现：
1.动态REM方法：rem指的是根元素的font-size,我们可以将html宽度设置为屏幕宽度，将px转换成rem来进行调配，适应不同屏幕宽度设备的显示
<script> /*通过js将html宽度设置为屏幕宽度*/
var pageWidth = window.innerWidth
document.write('<style>html{font-size:'+pageWidth+'px;}</style>')
</script>
在 scss 文件里添加，这个方法可实现 px 自动变 rem
@function px( $px ){
@return $px/$designWidth*10 + rem;
}
$designWidth : 750; 为设计稿的宽度
.child{
width: px(375);
height: px(160);
margin: px(40) px(40);
border: 1px solid red;
float: left;
font-size: 1.2em;
}
2.meta query方法：可以通过写媒体查询条件，只有满足了媒体查询条件，才实现内容里的css
/*如果宽度小于 300 像素则修改背景颜色*/
@media screen and (max-width: 300px)
{
body {
background-color:lightblue;
}
}
3.meta viewport:因为浏览器初始会将页面现在手机端显示时进行缩放，因此我们可以在meta标签中设置meta viewport属性，告诉浏览器不将页面进行缩放，页面宽度=用户设备屏幕宽度
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
/* width：控制 viewport 的大小，可以指定的一个值，device-width指的是用户屏幕宽度；
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例；
maximum-scale：允许用户缩放到的最大比例；
minimum-scale：允许用户缩放到的最小比例；
user-scalable：用户是否可以手动缩放 */