应用Rem合理布局完成自融入

日期:2021-02-28 类型:科技新闻 

关键词:通道抠图,怎么在图片上编辑文字,创客贴作图神器,免费图片设计制作在线,背景透明图制作

以前写过1篇挪动端兼容的文章内容,很长,內容太多,看得非常容易杂乱,再次写个通熟易懂版的。

为何要自融入?

例如,针对1个挪动端网页页面,设计方案师给的视觉效果稿画布宽 750,视觉效果稿中的1个黄色区块的规格是 702 x 300,并在画板中垂直居中。大家期待在任何1个机器设备中的展现占比都与视觉效果稿中1样,依据合理布局视口宽度等比放缩。

在挪动端大家1般会设定合理布局视口宽度=机器设备宽度,即內容展现的地区在机器设备显示屏内。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

但不一样机器设备的宽度不一样,因此让合理布局视口的宽度也不一样。例如 iPhone 6 的合理布局视口宽度为 375, iPhone6 Plus 合理布局视口的宽度为 414。

针对给定的画布宽 750 的视觉效果稿,假如在合理布局视口宽度为 375 的 iPhone 6 机器设备上展现,大家能够将视觉效果稿中元素的像素值除以 2,编码以下:

.box{
    width: 351px;
    height: 150px;
    margin-top: 40px;
    background: #F5A623;
}

那末在 iPhone 6 中的展现如右图,与左图视觉效果稿合理布局1致。

但一样的编码,在  iPhone 6 Plus 中展现的就不1样了,两边间隔增大。由于  iPhone 6 Plus 的合理布局视口比 iPhone 6 要宽,而矩形框框的规格沒有变, 仍然是 315 x 150。

针对给定的画布宽 750 的视觉效果稿,假如在合理布局视口宽度为 414 的 iPhone 6 Plus 机器设备上展现,大家能够将视觉效果稿中元素的像素值按占比除以 (750 / 414),即:

.box{
    width: 387.5px;
    height: 165.6px;
    margin-top: 44.2px;
    background: #F5A623;
}

网页页面展现实际效果还可以跟视觉效果稿1样了。

 

以便在不一样机器设备宽度(不一样视口宽度)的网页页面中展现实际效果跟视觉效果稿1样,必须写不一样的 CSS 像素值。 大家的诉求是期待能用一样的 CSS 编码在不一样宽度的机器设备上呈现实际效果与视觉效果稿同样,通俗化的说便是依照视觉效果稿中元素与画布的规格占比在不一样机器设备上等比放缩,从而做到在不一样机器设备上自融入的实际效果。

应用 Rem 合理布局处理自融入难题

怎样用同1份 CSS 编码,使元素规格伴随着合理布局视口宽度的转变按视觉效果稿中的占比等比放缩?大家融合 CSS 中相对性企业 rem 的特点,rem 企业的像素值是相对根元素(HTML 元素) 的 font-size 的。比如:HTML 的 font-size 为 100px, 在 CSS 款式中设定某1元素的宽度为 2rem, 那末此元素在网页页面中的宽度为 200px。

依据元素在视觉效果稿中的占比等比放缩寻找这样1层关联:

视觉效果稿元素规格 / 视觉效果稿画布宽度  
= (rem 值 * HTML 元素的 font-size) / 合理布局视口宽度 
= rem 值 * (HTML 元素的 font-size / 合理布局视口宽度)
= rem 值 / (合理布局视口宽度  /  HTML 元素的 font-size)

假如:

合理布局视口宽度  /  HTML 元素的 font-size = 定值 N

便可以用同1份 CSS 编码完成在任何机器设备中自融入。

rem 值 = N * (视觉效果稿元素规格 / 视觉效果稿画布宽度 )

因此,大家要是明确1个 N 值,再进行两步,便可完成自融入:

  • 第 1 步:动态性设定 HTML 元素的 font-size = 合理布局视口宽度 / N
  • 第 2 步:将视觉效果稿中导出来的元素 CSS 像素值转成 rem 企业: rem 值 = N * (视觉效果稿元素规格 / 视觉效果稿画布宽度 )

倘若您的视觉效果稿画布宽度是 750,以便便于 rem 值的测算, 您能够挑选设定 N = 7.5, 这样只必须将视觉效果稿中的规格值除以 100 便可以获得 rem 企业的 CSS 像素值。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

上一篇:CSS3特性 line 返回下一篇:没有了