CSS
响应式 Web 设计 - 图片
你可以使用媒体查询的 min-device-width 替代 min-width 属性,它将检测的是设备宽度而不是浏览器宽度。浏览器大小重置时,图片大小不会改变。
源代码:
点击运行 »
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="utf-8"> <style> /* For device width smaller than 400px: */ body { background-repeat: no-repeat; background-image: url('/wp-content/uploads/2015/06/img_smallflower.jpg'); } /* For device width 400px and larger: */ @media only screen and (min-device-width: 400px) { body { background-image: url('/wp-content/uploads/2015/06/img_flowers.jpg'); } } </style> </head> <body> </body> </html>
运行结果:
点击运行 »