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

Question

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

有一个徽标在网站顶部的1450px最大宽度右侧刷新，然后是下面的1450px宽度图像。

我希望保持这种状态，但在调整平板电脑或手机屏幕大小时，徽标仍会一直向右冲洗。

我想在徽标的右侧添加大约20px填充，因此它不会在移动设备和平板电脑屏幕上刷到边缘，而是使其与桌面屏幕上的1450px图像（并刷新到图像边缘）对齐。

我该怎么做？

Answer 1

您可以尝试以下代码：

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

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

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

Answer 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
   }

祝你好运做一些关于Google的“响应式设计”的研究很多

增加：

您可以在一个CSS中拥有任意数量的视口或SCREENS，因此您可以更改所需大小的属性。 ：）

Answer 3

感谢您的帮助。

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

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


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