一聚教程网:一个值得你收藏的教程网站

热门教程

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上查看代码片派生到我的代码片

 
 
 
 
 
 

热门栏目