删除小型设备(移动电话)上的空白页边距

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

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

问题是，在小屏幕上的文本两侧有空白。我怎样才能摆脱这个空白？我仍然想让马金斯出现在更大的屏幕上。

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

未修改的.容器有可接受的边距，但我想让它适用于.child1wide，也许还能学到一些新东西。

CSS(注意，.contain可能也在我的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"文本位于.child1widediv之外，这意味着它自动位于wordpress主题设置的.contatordiv中)：

<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纯屏幕，但无法使其工作。

如果你数学不太好(像我一样)，乍一看可能会有很多东西需要学习。但我向你保证，一旦你开始使用这些方程，你就会学会欣赏它们的强大和易用性。

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

首先，代码片段首先包含最终代码，稍后进行解释(如太长了，读不下去了中所述)。最好先将其保存在一个新的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：响应排版)来确定特定浏览器视口大小下所需的大小，而不是使用测试特定vp大小并在特定断点设置大小的MQ列表。

例如：

.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：直线方程，易于理解的中学解释，非常值得阅读)。

其中：

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图上选择一个低点和一个高点，这是我们需要的最小和最大响应大小
在两点之间画一条假想线
并让CSScalc()计算同一行上的所有其他点，即我们在任何给定时间需要的响应大小(字体、边距、填充、宽度、高度等)

Pro：更少的CSS，更少的维护

Con：编码时需要更多的准备，只适用于直线(不包括火箭科学)。calc()结果的异常仍然需要一些MQ。

代码片段使用以下几个例子用逐步方程进行了大量注释：

响应基本字体大小，body { font-size: calc() }
响应页面填充，.padded { padding: calc(2.5vh + 24px) calc(19.5vw - 54.4px) }
关于上下半填充，简单地将.padded calc(2.5vh + 24px)除以2

我不理解calc函数。所以

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

如果视口高度为1000px，calc(2.5vh+24px)将提供的填充

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

我现在通过将我的主主题容器设置为：来解决我的问题

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

溢出的原因：

元素"child1wide"的宽度=75vw-将宽度更改为auto
"child1wide"的左边距为负-可能最好使用position:relative，并通过定位(顶部、左侧、右侧、底部)移动内容

相关内容

最新更新

热门标签：