- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我不希望小型设备的边缘有任何空白。当屏幕已经很小时,使用除屏幕全宽之外的任何东西都会适得其反。
所以我通过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;
}
<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.
最佳答案
当你不擅长数学时(像我一样),乍一看可能会吸收很多东西。但我向您保证,一旦您开始使用这些方程式,您将学会欣赏它们的强大功能和易用性。
初步版本:根据您的评论,此答案可能需要一些更新。
首先,片段 首先是最终代码,稍后解释(如 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) 将是显而易见的选择。它们在世界各地被许多开发人员普遍使用,就像我一样。
.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
在任何给定时刻您需要的断点上。
calc()
计算同一行上的所有其他点作为我们需要的响应大小(字体、边距、填充、宽度、高度等)在任何给定时间 . calc()
的异常(exception)情况结果仍然需要一些 MQ。
body { font-size: calc() }
.padded { padding: calc(2.5vh + 24px) calc(19.5vw - 54.4px) }
.padded calc(2.5vh + 24px)
通过 2
关于html - 删除小型设备(手机)上的边距空白,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61859289/
我知道如何通过iPhone开发创建sqlite数据库、向其中插入数据、删除行等,但我试图以编程方式删除整个数据库本身,但没有得到任何帮助。请有人指导我如何通过代码从设备中删除/删除整个 sqlite
请帮助指导如何在 Teradata 中删除数据库。 当我运行命令DROP DATABASE database_name时,我收到错误消息: *** Failure 3552 Cannot DROP d
Azure 警报规则的删除命令似乎不起作用,尝试了下面的方法,它返回状态为无内容,并且警报未被删除 使用的命令Remove-AzAlertRule -ResourceGroup "RGName"-Na
我在 flex 搜索中为大约50000个视频建立了索引,但是当它达到52000左右时,所有数据都被删除。嗯,这对我来说真的很奇怪,我没有为ES设置任何Heap大小或最小或最大大小的内存大小,因此它们没
我正在处理的问题是表单错误“输入由字母、数字、下划线或连字符组成的有效‘slug’。” 以下是我的表单字段验证: def clean_slug(self): slug = self.c
阅读文档,我希望 $("#wrap2").remove(".error") 从 中删除所有 .error 元素#wrap2。然而看看这个 JSFiddle: http://jsfiddle.net/h
嗨,我第一次尝试发现 laravel 我从 laravel 4.2 开始,我刚刚创建了一个新项目,但我误以为我写了这样的命令行 composer create-project laravel/lara
我已经在网上搜索了很长一段时间,但我找不到如何完全删除 apache 2.4 。 使用: Windows 7 c:\apache24\ 我已经尝试了所有命令,但没有任何效果。 httpd -k shu
可能是一个简单的答案,所以提前道歉(最少的编码经验)。 我正在尝试从任何列中删除具有特定字符串(经济 7)的任何行,并且一直在尝试离开此线程: How to drop rows from pandas
有几种方法可以删除/移除 vector 中的项目。 我有一个指针 vector ,我需要在类的析构函数中删除所有指针。 什么是最有效/最快甚至最安全的方式? // 1º std::for_each(v
我安装了一个 VNC 服务器并在某处阅读了我必须安装 xinetd 的信息。稍后我决定删除 VNC 服务器,所以我也删除了 xinetd。似乎 xinetd 删除了一些与 plesk 相关的文件,如果
我制作了一个从我们的服务器下载视频的应用。问题是: 当我取消下载时,我打电话: myAsyncTask.cancel(true) 我注意到,myAsyncTask 并没有在调用取消时停止...我的 P
是否可以在使用DELETE_MODEL删除模型之前检查模型是否存在我试图避免在尝试删除尚未创建的模型时收到错误消息。基本上我正在寻找对应的: DROP TABLE IF EXISTS 但对于模型。 最
我已经有了这个代码: 但它仍然会生成一个表行条目。 我想做的是,当输入的数量为0时,表行将被删除。请耐心等待,因为我是 php 和 mySQL 编码新手。 最佳答案 您忘记执行查询。应该是 $que
在 SharePoint 中,如果您删除/修改重复日历条目的单次出现,则不会真正删除/修改任何内容 - 相反,会创建一个新条目,告诉 SP 对于特定日期,该事件不存在或具有新参数. 因此,这可以通过删
在 routes.php 中我有以下路由: Route::post('dropzone', ['as' => 'dropzone.upload', 'uses' => 'AdminPhotoContr
在我的应用程序中,我正在尝试删除产品。当我第一次删除产品时,它会成功并且 URL 更改为/remove_category/15。我正在渲染到同一页面。现在,当我尝试删除另一个产品时,网址更改为/rem
这个问题被问了很多次,但给出的答案都是 GNU sed 特定的。 sed -i '' "/${FIND}/,+2d""$FILE" 给出“预期的上下文地址”错误。 有人可以给我一个例子,说明如何使用
在使用 V3 API 时,我找不到任何方法来删除和清理 Google map 。 我已经在 AJAX 站点中运行它,所以我想完全关闭它而无需重新加载页面。 我希望有一个 .unload() 或 .de
是否可以创建一个 Azure SQL 数据库用户来执行以下操作: 针对所有表和 View 进行 SELECT 创建/更改/删除 View 但用户不应该不拥有以下权限: 针对任何表或 View 插入/更
我是一名优秀的程序员,十分优秀!