移动端页面开发使用rem注意图片和背景图片

遇到的问题

我按照我之前的配置做了一个简单的页面，但是用浏览器开发者工具查看时，切换到手机模式总体来说没有缩放的效果，但文字有缩放的效果，所以也说明配置应该并没有出问题

总结一下

图片需要设定大小

因为我们在从设计图中切来的图片本身就是自带大小的，而且他的单位默认也为px(像素) 所以当我页面缩放时，设置为rem的元素都会跟随页面固定的调式大小，而px却是固定的
这里我想的有两种方法

设置图片的max-width

本来我想设置图片的max-width，这也不失为一种方法

img {
	max-width : 100%;
	height : auto;
	}

但是用这种方法有一个点需要注意，那就是我们需要设置好图片父级元素的宽度，因为他是根据父级的宽度来缩放的
并且图片的父级元素是可以动态缩放的

把图片单位改成rem

这个方法相对来说有点麻烦，如果我们需要的图片大小不一，那就需要设置很多次
但如果我们需要使用的图片大小相同的有很多，那就可以采用这个方法，毕竟我们的rem不能白配置
这种方法不需要考虑父元素，因为rem是直接相对于浏览器窗口的

对于背景图片

因为背景图片切出来也是有固定大小的，所以背景图片也需要设置一个属性

div {
	background-image : url();
	background-size : cover;
	}

这个属性可以让背景图片缩放以适应我们需要背景图片的元素
这个属性不仅用于移动端页面开发，在我们平时也经常用到，当背景图片过大时
我们可以使用，让背景图片自动适应