一个：

Question

我正在使用基本的CSS和HTML（没有引导程序）为响应式网站进行编码。现在我想更改要设置为各种设备大小的元素的大小（标题字体，图片大小等）。例如，我的代码如下：

.footer-link{
font-size: 14px;
width: 80%;
padding-bottom: 20px;}

，并希望通过代码减小 10％的大小，例如：

 .footer-link{
font-size: 12px;
width: 72%;
padding-bottom: 18px;}

我了解媒体。但与此同时，我仍然需要重写每种媒体中的每个代码和大小！实际上，我想通过使用一些特殊的代码来避免重写，这些代码可以单独减小媒体本身的大小。

但是我不知道要这样做。

有什么建议吗？

Answer 1

您可以在CSS中添加@media查询，并添加内部代码将被使用的最大宽度。例如：

@media  (max-width: 600px) {
 .footer-link{
    font-size: 12px;
    width: 72%;
    padding-bottom: 18px;}
}

现在仅当设备的最大宽度为600px时，此代码才会执行。

您还可以更改大小以使其em，rem，vw，vh，%，而不是常规的px使它更具动态性。

您可以阅读有关如何制作自适应网站from here

的更多信息

Answer 2

以下是小型设备的示例：

.footer-link{
  font-size: 14px;
  width: 80%;
  padding-bottom: 20px;
}

@media (min-width: 576px) {
  .footer-link{
  font-size: 12px;
  width: 72%;
  padding-bottom: 18px;}
}

要做其他大小，您只需创建一个新的媒体查询并更改大小，引导程序4的断点如下所示：

xs = Extra small <576px.
sm = Small ≥576px. 
md = Medium ≥768px.
lg = Large ≥992px. 
xl = Extra large ≥1200px.

Answer 3

三种方法：

一个：

1）使用rem缩放比例测量

请勿使用px，而应使用rem scaling measurement。 rem是 Root em ，一切都可以从此：root 值进行，此层次结构对于步骤2至关重要：

2）使用@media查询来控制根em的大小

设置后，您可以运行媒体查询，只需为每个rem查询控制 root -em（@media）值即可。

示例：

:root {
    font-size: 16px; /* this sets 1rem */ 
}
.footer-link{
    font-size: 0.9rem; /* 16 x 0.9 */
    width: 5rem;
    padding-bottom: calc(100% - 5rem);
}

@media screen and (max-width:500px){
    :root {
        /* Everything is magically a bit smaller */
        font-size: 14px; 
    }
}

注意：在font-size:中设置html{ ... }可能是overwrite the browser font-size设置（未经我确认）。

两个：

使用上面的 ONE ，但也可以使用CSS Variables进行调整。

示例：

:root {
   /* percentage */
   --widthValue: 80%; 
   font-size: 16px; /* this is still needed as sets 1rem */ 
}

.footer-link{
    font-size: 1rem;
    width: var(--widthValue);
    padding-bottom: calc(100% - var(--widthValue));
}

@media screen and (max-width:500px){
    :root {
        /* Everything is magically a bit smaller */
        font-size: 15px;
        --widthValue: 76%; 
    }
}

这使您可以微调无法通过rem值确定范围的调整。阅读more here。

三：

当我开始编写此答案时，我想到的是第三种方法，但是我认为上述两种方法之间的联系应该比您想要的要容易得多。

我了解媒体。但我仍然需要重写每种媒体中的每个代码和大小

是的，您将需要按照问题中的说明来更新基本CSS，但这是不可避免的，因为您将 static 代码替换为 variable 驱动的代码。

我提出的解决方案是 D 而不是 R 重复使用 Y 我们自己（huh?）-您只需更改一个@media查询中的值以及该简单更改后的所有样式 cascade 。

Answer 4

您提供的示例代码不是响应式网站的示例。为了响应，我们必须重新设计和重新排序元素。某些元素（例如图像和背景）可能需要调整大小，但当屏幕较小时，字体，宽度和填充等不应较小。。例如，如果在小窗口中缩小窗口时减小元素的宽度，则元素width:1%就是没有的！

所以我认为您需要一种 ZOOM ，它可能适合于游戏和某些特殊用途。

除了不使用CSS媒体查询和不重写CSS规则外，缩放所有内容的唯一方法是JS代码。因此，我写了一个简单的示例来展示如何根据窗口大小缩放所有内容。

请尝试调整窗口大小以检查效果：

var myDesignWidth=500; //this is the initial width which you design everything


$(window).on("load resize",function(){
   var newZoom=$(window).width() / myDesignWidth;
   $("body").css({"zoom":newZoom});
})

.footer-link{
font-size: 14px;
width: 80%;
padding-bottom: 20px;
display:inline-block;
background:url('https://d1o2pwfline4gu.cloudfront.net/m/t/13116/13106367/a-0270.jpg');
background-size:cover;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="footer-link">This is a footer link with background</a>

如何一起减少或增加CSS的大小？

4 个答案:

一个：

两个：

三：