比较电脑端与手机端的效果
可见,电脑端很大的图,移动上看就很小了
不太好看
再看一次
大图的时候
显示到手机上时,被等比例缩小了
不希望有这样子的效果
设置视口
手机设备会有自己的宽和高
效果
大一点的图,适配一下,让它变小,看效果
例子
开发网页时
美工给图的尺寸
750刚好是iphone六的一倍
前端按照手机的情况先把尺寸按照比例放大的做好
用于手机端的时候,再缩小。页面就清晰不混乱。
不仅仅图片缩放,背景图也需缩放
让背景图适配
如果不适配,图片按原始大小显示,适配后,会缩放
本例中背景图片按照.box盒子的宽高适配,结果
就是图片刚好和盒子尺寸一样大小,完成了适配
适配前
图片太大了
适配后
使用了length适配,参数宽高
也可以使用百分比
background-size: 宽百分比 高百分比
auto,背景图真实大小
cover效果
父级整体的盖住图片
contain
让容器可以把图片全部展现出来
小结,移动端有一个视口的概念,还有一个retina屏适配的概念