最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
css让图片宽度自适应屏幕的例子
时间：2022-06-25 09:28:52 编辑：袖梨 来源：一聚教程网
手机浏览自适应网页，Safari浏览器往往能自动识别并排版，图片宽度是占满屏幕的，那么在不用阅读器的时候如何做成这样的效果呢？如图，这里要让图片宽度占满屏幕。
因为图片是在一个p标签内，而且是Markdown转换成html格式的，所以需要用jquery动态把样式加给这个p标签。
css代码：
CSS
@media screen and (max-){
.img-width{
margin: auto -15px;
}
}
这里用CSS 3媒体查询自适应手机屏幕。
JS代码：
这样效果就实现了，运行gulp命令重新压缩css和js文件。
在网页中设置的1px与物理像素中的1px不会相同，所以导致不同在不同手机上显示结果都不相同，通过以下设置找到了适合当前网页自适应不同手机、不同浏览器的办法，代码如下：
[html] view plain copy 在CODE上查看代码片派生到我的代码片
其中的px就是网页内容区需要的最小宽度，需要在不同手机上刚好全屏显示，target-densitydpi=device-dpi设置后，css中的1px就会等于物理像素中的1px。
补充：由于safari浏览器不支持target-densitydpi=device-dpi，所以加入JS代码自动调整缩放比例，调整后的代码：
[html] view plain copy 在CODE上查看代码片派生到我的代码片
相关文章
- 王者荣耀侦探能力大测试攻略 王者荣耀侦探能力大测试怎么过 11-22
- 无期迷途主线前瞻兑换码是什么 11-22
- 原神欧洛伦怎么培养 11-22
- 炉石传说网易云音乐联动怎么玩 11-22
- 永劫无间手游确幸转盘怎么样 11-22
- 无期迷途主线前瞻兑换码是什么 无期迷途主线前瞻直播兑换码介绍 11-22