如何解决如何在更大尺寸的设备上设置图像的最大宽度而又不破坏视网膜屏幕的外观?
我一直在搜寻,但在复杂的解释中迷失了自己。 然后我认为这里的某人可能会提供帮助。 :) 我已经建立了一个网页,其中包含移动版本和计算机版本。
我对大多数尝试在所有媒体设备上显示的内容感到满意。 尽管我有一些元素想要为更大的屏幕设置最大宽度。 只有一些包含图像的元素,而不是文本。基本上,图像在大屏幕上变得太大了!
我如何为“ @media屏幕和(最小宽度:XXXpx)”设置最大宽度,但是我该如何在其中也包括视网膜屏幕?我不想让小的视网膜屏幕受此影响,只有大屏幕...
即:
.singel_image_container {
display: inline-block;
width: 60vw;
margin-bottom: 7vh;
margin-left: 2vw;
}
@media screen and (min-width: 1200px) {
display: inline-block;
width: 40vw;
margin-bottom: 7vh;
margin-left: 12vw;
}
澄清:
HTML:
<div class="singel_image_container">
<img class="landscape_image" src="img/alven/1.jpg">
</div>
<div class="project_description">
<h2><i>Ädno / Älven / The River</i> Blablabla</h2>
</div>
CSS:
.project_description {
float: right;
width: 34vw;
margin-right: 2vw;
}
.singel_image_container {
display: inline-block;
width: 60vw;
margin-bottom: 7vh;
margin-left: 2vw;
}
然后我想要在“ single_image_container”上设置最大宽度,并在较大的屏幕上查看时扩大project_description上的边距。
解决方法
有分辨率媒体查询min-resolution
和max-resolution
。添加屏幕宽度是可选的。
@media only screen and (min-resolution: 300dpi) and (min-width: 1300px) {
.singel_image_container {
width: 60vw;
}
}
CSS技巧上有一个good article。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。