删除小型设备(手机)上的空白边距 [英] Delete margin white space on small devices (mobile phones)
问题描述
在小型设备上，我不希望在空白处留空白.如果屏幕已经很小，那么除了屏幕的整个宽度之外，什么都不能使用.
I do not want any white space at the margins at small devices. When the screen is already small it is counterproductive to use anything but the full width of the screen.
所以我正在通过wordpress使用主题，但是我想出了容器div并能够对其进行修改，所以我想缩小它的范围. 我还声明了一个div(child1wide)，该宽度将比容器(宽度为65％)宽，以免损坏.
So I am using a theme through wordpress, but I figured out the container div and was able to modify it, I wanted to make it narrower. I also declared a div (child1wide) that would be wider than the container (that has the width of 65%), hoping the marings would dissapear.
问题是在小屏幕上，文字的两边有空白. 我如何摆脱这个空白?我仍然想在更大的屏幕上放毛利.
The problem is that there are margins, that is white space, on the sides of the text on small screens. How can I get rid of this white space? I still want to have marrgins on bigger screens.
您可以看到今天的样子: https://imgur.com/dcVIGBJ
You can see how it looks today: https://imgur.com/dcVIGBJ
未经修改的.container具有可接受的页边距，但我想使其适用于.child1wide，也许还可以学习一些新知识.
The un-modified .container has acceptable margins, but I want to make it work for .child1wide and maybe learn something new.
CSS(注意，.container也可能在我的wordpress主题中定义，这只是我额外的自定义CSS"):
CSS (observe, the .container is probably also defined within my wordpress theme, this is only me additional "Custom 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"文本位于.child1wide-div之外，这意味着它自动位于wordpress主题设置的.container-div中):
HTML (the second "Lorem ipsum"-text is outside the .child1wide-div, meaning it is automaticly in the .container-div set by wordpress theme):
<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 only屏幕，但无法使其正常工作.
I know about the @media only screen and but can not make it work.
推荐答案
当您不那么擅长数学时(像我一样)，乍一看可能很多.但是我向您保证，一旦开始使用这些方程式，您将学会欣赏它们的强大功能和易用性.
When you're not that good at math (like me), it might be a lot to take in at first glance. But I assure you, once you start using the equations you will learn to appreciate their power and ease of use.
初步版本:此ananser可能需要根据您的评论进行一些更新.
首先，请先添加代码段，并附上最终代码，然后再进行解释(如 tl; dr 中所示).最好先将其保存在新的HTML文档中，然后在浏览器中打开该文档并开始调整大小...
To start off, the snippet with the final code first, explanation later (as in tl;dr). Best save it in a new HTML document first, open that document in the browser and start resizing...
/********************************/
/* 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)是显而易见的选择，您希望在较小的设备上响应(几乎)没有间距，而在较大的设备上保持正常"间距.就像我一样，许多开发人员在世界各地都广泛使用它们.
As you stated that you wanted responsive, (little to) none spacing on smaller devices and 'normal' spacing on larger devices, using @media queries (MQs) would be the obvious choice. They're commonly used all over the world by many developers, as I did too.
但是，在过去的几年中，我学会了使用一个方程式( :响应式印刷术)来确定特定浏览器视口大小所需的大小，而不是使用针对特定vp大小的MQ测试列表并在特定断点处设置大小.
However, over the past few years I have learned to use a single equation (Codepen: responsive typography) to determine a needed size at a specific browser viewport size, instead of using a list of MQs testing for a specific vp size and set a size at specific breakpoints.
例如:
.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 } }
.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.
or whatever font-size on a breakpoint you require at any given moment.
如您所见，一个计算而不是八个CSS规则.为此，我们需要使用
As you can see, one calculation instead of eight CSS rules. To accomplish this we need to use a
线性方程式:y = mx + b" ( MathIsFun:方程式直线，易于理解的中学解释，非常值得一读).
'Linear Equation: y = mx + b' (MathIsFun: Equation of a Straight Line, easy to understand Middle School explanations, well worth the read).
其中:
- y = mx + b ，我们需要的响应结果
- m =(y2-y1)/(x2-x1)，直线的陡度，固定值
- x =始终为100vmin/vh/vw/vmax ，可变值
- b = y1-m * x1 ，当视口大小为0(x = 0)时y的值，固定值
- x轴浏览器视口大小
- y轴(响应)大小
- y = mx + b, the responsive result we need
- m = (y2 - y1) / (x2 - x1), steepness of the line, fixed value
- x = always 100vmin/vh/vw/vmax, variable value
- b = y1 - m * x1, value of y when viewport size is 0 (x=0), fixed value
- x-axis browser viewport size
- y-axis (responsive) size
用于
- 点1(x1，y1)，直线上的最低点，最小值.浏览器视口大小，最小值所需大小
- 点2(x2，y2)，直线上的最高点，最大值浏览器视口大小，最大值所需大小
- point 1 (x1,y1), low point on a line, min. browser viewport size, min. required size
- point 2 (x2,y2), high point on a line, max. browser viewport size, max. required size
我们实际上要做的是:
- 在XY图上选择一个低点和一个高点，这是我们需要的最小和最大响应大小
- 在两点之间画一条假想线
- 并让CSS
calc()计算同一行上的所有其他点，即响应大小(字体，边距，填充，宽度，高度等)，我们在任何给定时间需要 .
- select a low and a high point on a XY-graph, being the minimum and maximum responsive size we need
- draw an imaginary line between the two points
- and have CSS
calc()calculate all the other points on that same line being the responsive size (font, margin, padding, width, height, etc.) we need at any given time.
专业版:更少的CSS，更少的维护
Pro: much less CSS, less maintenance
缺点:编码时需要做更多准备，并且仅适用于直线(不包括火箭科学). calc()结果的异常仍将需要一些MQ.
Con: Takes some more preparation when coding and only works for straight lines (no rocket science included). Exceptions to the calc() result will still need some MQ.
使用一些示例，使用逐步的公式对代码段进行了大量注释:
The code snippet is heavily commented with step by step equations using a few examples:
- 响应式基本字体大小，
body { font-size: calc() } - 响应式页面填充，
.padded { padding: calc(2.5vh + 24px) calc(19.5vw - 54.4px) } - 上下半部的填充感，只需将
.padded calc(2.5vh + 24px)除以2
- responsive base font size,
body { font-size: calc() } - responsive page padding,
.padded { padding: calc(2.5vh + 24px) calc(19.5vw - 54.4px) } - resonsive half top/bottom padding, simply dividing
.padded calc(2.5vh + 24px)by2
这篇关于删除小型设备(手机)上的空白边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
