本文介绍了如何通过设置viewport元标签实现手机浏览器的满屏自适应，并使用CSS媒体查询针对不同屏幕尺寸调整图片大小，确保良好的用户体验。
1.设置页面宽度让手机浏览器满屏自适应
<meta name="viewport" content="width=650;target-densitydpi=device-dpi; minimum-scale=0.5; maximum-scale=2,user-scalable=yes">
2.css判断
@media screen and (max-width: 650px) { img {max-width:100%; } }
@media screen and (max-width: 480px) { img{max-width:100%; } }
@media screen and (max-width: 320px) { img{width:50%; } }
扫一扫
1万+