删除小型设备（手机）上的边距空白

Question

我不希望小型设备的边缘有任何空白。当屏幕已经很小时，使用除屏幕全宽之外的任何东西都会适得其反。

所以我通过 wordpress 使用主题，但我想出了容器 div 并且能够修改它，我想让它更窄。 我还声明了一个比容器（宽度为 65%）更宽的 div（child1wide），希望marings 会消失。

问题是在小屏幕上的文本两侧有边距，也就是空白。 我怎样才能摆脱这个空白？我仍然希望在更大的屏幕上留有余量。

您可以看到它今天的样子： https://imgur.com/dcVIGBJ

未修改的 .container 有可接受的边距，但我想让它适用于 .child1wide 并且可能学到一些新东西。

CSS（注意，.container 可能也在我的 wordpress 主题中定义，这只是我附加的“自定义 CSS”）：

.child1wide {
  background-color: yellow;
  display: flex;
  margin-left: calc(-37.5vw + 50%);
  width: 75vw;
}

.container {
width: 65%  ;
padding: 0px 0px 0px 0px;
}

HTML（第二个“Lorem ipsum”-text 在 .child1wide-div 之外，意味着它自动在 wordpress 主题设置的 .container-div 中）：

<div class="child1wide">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore neque repellat ipsum natus magni soluta explicabo architecto, molestias laboriosam rerum. Tempore eos labore temporibus alias necessitatibus illum enim, est harum perspiciatis, sit, totam earum corrupti placeat architecto aut minus dignissimos mollitia asperiores sint ea.
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore neque repellat ipsum natus magni soluta explicabo architecto, molestias laboriosam rerum. Tempore eos labore temporibus alias necessitatibus illum enim, est harum perspiciatis, sit, totam earum corrupti placeat architecto aut minus dignissimos mollitia asperiores sint ea.

我知道@media 唯一的屏幕，但不能让它工作。

Answer 1

当您（像我一样）数学不是那么好时，乍一看可能会吸收很多东西。但我向您保证，一旦您开始使用这些方程式，您将学会欣赏它们的强大功能和易用性。

初步版本：根据您的评论，此答案可能需要一些更新。

首先，sn-p 带有最终代码，稍后解释（如 tl;dr 中）。最好先将其保存在一个新的 HTML 文档中，在浏览器中打开该文档并开始调整大小...

/********************************/
/* a few preferred global rules */
/********************************/
html,body {
    box-sizing: border-box;     /* use client+padding+border in calculations */
    height: 100%; width: 100%;  /* to fill full viewport */
    margin: 0;                  /* getting rid of HTML spacing */
}
body { min-height: 100vh }      /* to fill full viewport */

*::before,*::after,
 * { box-sizing: inherit }      /* take over parent setting */

/*
    Responsive page padding using
    Linear Equation y=mx+b for points p1(x1,y1) p2(x2,y2)

    Reference
    MathIsFun: Equation of a Straight Line
    https://www.mathsisfun.com/equation_of_line.html

    y = resulting size we need

    m = (y2 - y1) / (x2 - x1),
        fixed result 1

    x = always one of 100vh/vw/vmin/vmax (VX in below CSS calc)
        variable part of our equation, which makes our y change on browser resize

    b = y1 - m * x1 and with m substituted: b = y1 - (y2 - y1) / (x2 - x1) * x1
        fixed result 2

    x1 - minimum viewport size
    y1 - needed size at minimum viewport     

    x2 - maximum viewport size 
    y2 - needed size at maximum viewport
    
    x1,y1,x2,y2 in pixel unit (can be any unit, provided you use the proper unit conversion)

    CSS calc: calc(m * 100VX + b) 
    Final   : calc(mVX + b) => multiply m with 100 to get rid of '* 100VX' 

    top/bottom padding: p1(320,32) p2(1920, 72) => y = 0.025x + 24   (vp height dependent)
    left/right padding: p3(320, 8) p4(1920,320) => y = 0.195x - 54.4 (vp width dependent)

    top/bottom padding:
        m = (72 - 32) / (1920 - 320) = 40 / 1600 = 0.025
        x = vp height dependent, so 100vh
        b = 32 - 0.025 * 320 = 32 - 8 = 24
        CSS calc = calc(0.025 * 100vh + 24px) => calc(2.5vh + 24px) 

    left/right padding:
        m = (320 - 8) / (1920 - 320) = 312 / 1600 = 0.195
        x = vp width dependent, so 100vw
        b = 8 - 0.195 * 320 = 8 - 62.4 = -54.4
        CSS calc = calc(0.195 * 100vw - 54.4px) => calc(19.5vw - 54.4px) 

*/
.padded { padding: calc(2.5vh + 24px)     calc(19.5vw - 54.4px) }
.halfTB { padding: calc((2.5vh + 24px)/2) calc(19.5vw - 54.4px) }
/* half height T/B padding, simply divide result of calc for T/B  by 2 */

/* uncomment to constraint padding below 320, above 1920 *//*
@media screen and (max-width: 320px) { .padded { padding: 32px   8px } }
@media screen and (min-width:1920px) { .padded { padding: 72px 320px } }
/* probably not really needed, just to be complete */

/* Extra: responsive base font size: y = 0.00625x + 12 */
/*        points p1(320,14) p2(1280,20) vp independent where 0.75rem = 12/16 */
body        { font-size: calc(0.625vmin + 0.75rem); line-height: 1.3333 } /* use root fontsize */
:root,html  { font-size: 100% }   /* use browser default fontsize (from browser user settings) */

.child1wide { width: 100% } /* width is restricted by L/R .padded, centered automatically */
.container  { width:  66.667%; margin: 0 auto } /* width restricted by percent%, centered by margin */

<h1 class="padded halfTB">calculated padding versus percentage<br>resize the browser to see the effect</h1>
<h3 class="padded halfTB">normally you would use ".padded" on some main container, now split to show difference</h3>

<div class="child1wide padded">
    <h2>padding with Linear Equation</h2>
    <p>Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
        deleniti copiosae.</p>
    <p>Cu vel debet nobis, repudiare deseruisse reprehendunt usu ad. Ex elit idque nam. Omnis munere detraxit mei te, eu labore appareat verterem
        est. Mel ex oporteat consectetuer.</p>
    <p>Pro ea nonumy integre, mel at solum corpora. Id viris audiam repudiare cum, pri dolore appareat ex, per propriae detracto tacimates ex.
        Elitr sapientem quo et, usu suas porro tibique cu.</p>
</div>
<div class="container">
    <h2>width 66.667%, margin: 0 auto</h2>
    <p>Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
        deleniti copiosae.</p>
    <p>Cu vel debet nobis, repudiare deseruisse reprehendunt usu ad. Ex elit idque nam. Omnis munere detraxit mei te, eu labore appareat verterem
        est. Mel ex oporteat consectetuer.</p>
    <p>Pro ea nonumy integre, mel at solum corpora. Id viris audiam repudiare cum, pri dolore appareat ex, per propriae detracto tacimates ex.
        Elitr sapientem quo et, usu suas porro tibique cu.</p>
</div>

正如您所说，您希望在较小的设备上响应（几乎）没有间距，在较大的设备上实现“正常”间距，使用@media 查询 (MQ) 将是显而易见的选择。它们在世界各地被许多开发人员普遍使用，就像我一样。

然而，在过去的几年里，我学会了使用单个方程 (Codepen: responsive typography) 来确定特定浏览器视口大小下所需的大小，而不是使用 MQ 列表来测试特定 vp 大小和设置特定断点处的大小。

例如：

.some-class: { font-size: calc(0.625vmin + 12px) }

可以做的完全一样

.some-class { font-size: 13px } @media (min-size: 320px) { .some-class { font-size: 14px } } @media (min-size: 480px) { .some-class { font-size: 15px } } @media (min-size: 640px) { .some-class { font-size: 16px } } @media (min-size: 800px) { .some-class { font-size: 17px } } @media (min-size: 960px) { .some-class { font-size: 18px } } @media (min-size: 1120px) { .some-class { font-size: 19px } } @media (min-size: 1280px) { .some-class { font-size: 20px } }

或任何font-size 在任何给定时刻您需要的断点。

如您所见，一个计算而不是八个 CSS 规则。为此，我们需要使用一个

'线性方程：y = mx + b'（MathIsFun: Equation of a Straight Line，通俗易懂的中学解释，值得一读）。

在哪里：

• y = mx + b，我们需要的响应式结果
• m = (y2 - y1) / (x2 - x1)，线的陡度，固定值
• x = 始终为 100vmin/vh/vw/vmax，可变值
• b = y1 - m * x1，视口大小为0（x=0）时的y值，固定值
• x 轴 浏览器视口大小
• y 轴（响应式）尺寸

为

• 点 1 (x1,y1)，一条线上的最低点，最小值。浏览器视口大小，最小值所需尺寸
• 点 2 (x2,y2)，一条线上的最高点，最大值。浏览器视口大小，最大值所需尺寸

我们实际上在做的是：

• 在 XY 图上选择一个低点和一个高点，这是我们需要的最小和最大响应尺寸
• 在两点之间画一条假想线
• 并让 CSS calc() 计算同一行上的所有其他点，即我们在任何给定时间需要的响应大小（字体、边距、填充、宽度、高度等）。

专业版：更少的 CSS，更少的维护

缺点：在编码时需要做更多准备，并且只适用于直线（不包括火箭科学）。 calc() 结果的异常仍需要一些 MQ。

代码 sn-p 使用一些示例通过逐步方程式进行了大量注释：

• 响应式基本字体大小，body { font-size: calc() }
• 响应式页面填充，.padded { padding: calc(2.5vh + 24px) calc(19.5vw - 54.4px) }
• 共振半顶部/底部填充，只需将.padded calc(2.5vh + 24px) 除以2

Answer 2

我不明白 calc 函数。 所以

.padded { padding: calc(2.5vh + 24px) calc(19.5vw - 54.4px) } 会产生顶部和底部填充，还是左右？

如果视口高度为 1000px，calc(2.5vh + 24px) 将给出一个填充

390.4px 到 390px * 2.5vh + 24px = 1000px??

Answer 3

我现在通过将我的主题容器设置为：

@media screen and (max-width: 600px) {
  div.container {
    width:95%;
  }
}

Answer 4

溢出的原因：

• 元素“child1wide”的宽度 =75vw - 将宽度更改为自动
• “child1wide”的左边距为负 - 最好使用 position: relative 和移动内容（上、左、右、下）