遇到的问题
我按照我之前的配置做了一个简单的页面,但是用浏览器开发者工具查看时,切换到手机模式总体来说没有缩放的效果,但文字有缩放的效果,所以也说明配置应该并没有出问题
总结一下
图片需要设定大小
因为我们在从设计图中切来的图片本身就是自带大小的,而且他的单位默认也为px(像素) 所以当我页面缩放时,设置为rem的元素都会跟随页面固定的调式大小,而px却是固定的
这里我想的有两种方法
设置图片的max-width
本来我想设置图片的max-width,这也不失为一种方法
img {
max-width : 100%;
height : auto;
}
但是用这种方法有一个点需要注意,那就是我们需要设置好图片父级元素的宽度,因为他是根据父级的宽度来缩放的
并且图片的父级元素是可以动态缩放的
把图片单位改成rem
这个方法相对来说有点麻烦,如果我们需要的图片大小不一,那就需要设置很多次
但如果我们需要使用的图片大小相同的有很多,那就可以采用这个方法,毕竟我们的rem不能白配置
这种方法不需要考虑父元素,因为rem是直接相对于浏览器窗口的
对于背景图片
因为背景图片切出来也是有固定大小的,所以背景图片也需要设置一个属性
div {
background-image : url();
background-size : cover;
}
这个属性可以让背景图片缩放以适应我们需要背景图片的元素
这个属性不仅用于移动端页面开发,在我们平时也经常用到,当背景图片过大时
我们可以使用,让背景图片自动适应