设置图像的宽度是窗口的大小

Question

是确保图像正常占用的宽度在移动设备上的唯一途径，这一点：

if ($(window).width() < $("#entry img").width()) 
{ 
    $("#entry img").width($(window).width()); 
} 

就像是没有在CSS没有更好的办法？

Answer 1

你可以使用媒体查询的CSS检查设备的宽度，然后只覆盖图像宽度为100％的查询移动宽度内：

MDN对如何去这个平时详尽的文档： https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

<style> 
@media (max-width: 600px) { 
    .img { 
    width: 100%; 
    } 
} 
</style> 

这意味着小于600px的屏幕宽度的设备将服务的查询中的CSS ...这可能是你的默认图像样式的覆盖。您可以根据您的选择调整查询宽度，并在CSS中堆叠额外的查询块以设置平板电脑分辨率的独特样式等。