如何更改特定屏幕宽度的图像填充？答案

【问题标题】：How do I change the padding of an image at a specific screen width?如何更改特定屏幕宽度的图像填充？
【发布时间】：2014-08-05 03:49:16
【问题描述】：

我正在构建一个宽度为 1450 像素的网站。

在网站顶部的 1450 像素最大宽度右侧有一个徽标，下面是一个 1450 像素宽度的图片。

我想保持这种方式，但是在为平板电脑或移动设备调整屏幕大小时，徽标一直保持在右侧。

我想在徽标右侧添加大约 20 像素的内边距，这样它就不会在移动设备和平板电脑屏幕上与边缘对齐，而是在桌面屏幕上与 1450 像素图像对齐（并与图像边缘对齐）。

我该怎么做？

【问题讨论】：

标签： image padding point

【解决方案1】：

你可以试试下面的代码：

<style>
  @media only screen and (max-width: 800px) { ... }
</style>

这会将 { ... } 中的 css 应用到屏幕宽度最大为 800x 的设备。

您可以设置.logo padding-right:20px;，它只适用于较小的屏幕。

【讨论】：

【解决方案2】：

你需要在css中使用媒体查询视口

在 CSS 中你需要这些标签

@media screen and (max-width: 480px) {
Inside here you add what you want changed for this screen
}

EG：

a {
 padding: 20px;  // Original
}

@media screen and (max-width: 480px) {
  a {
    padding: 10px; // only applies to screens up to 480 px view port
   }

祝你好运多做一些研究，这个谷歌上有很多“响应式设计”

加法：

您可以在一个 CSS 中拥有任意数量的视口或屏幕，因此您可以根据需要更改任何大小的属性。 :)

【讨论】：

【解决方案3】：

感谢您的帮助。

这是我使用的代码，现在可以使用了。（顺便说一句，我需要边距，而不是填充，因为填充实际上挤压了图像的宽度）。

img.logo
    {
width: 200px; 
float: right; 
padding-top: 20px; 
padding-bottom: 20px;
    } 


@media all and (max-width: 1450px) {
img.logo
    {
margin-right:20px;
    } 
}

【讨论】：