响应式网站设计有哪些误区(二)?

  • 来源:新网
  • 更新日期:2018-04-04

摘要:响应式网站就是关于如何恰当布局的问题。在这点上,ems是一个很好的工具。\"Ems\"(em)是网页媒体文档的一个度量单位,我们可以使用它设置字体、内外边距来合理规划网站排版,增强网站内容的可读性。

 响应式网站就是关于如何恰当布局的问题。在这点上,ems是一个很好的工具。"Ems"(em)是网页媒体文档的一个度量单位,我们可以使用它设置字体、内外边距来合理规划网站排版,增强网站内容的可读性。

4a0aa849-003f-4b3a-9716-1648bb3133d1.jpg

 
这是因为ems是一个可缩放的相关单位,它可以根据父级元素的字体大小进行相对应的缩放,这意味着不管字体增大还是缩小,网站的布局也会相应的进行调整,排版不会有任何变形。由于其可伸缩性和适应移动设备的特性,ems在web文档中正变得越来越受欢迎。
 
下面是关于ems的一个栗子,假设这有两个结合内容和设备设置的断点,一个是高分辨率的电脑,另一个是小屏幕的平板电脑。一个ems等于当前的字体大小,例如,基本字体是16px,1em就等于16px,为了在3840*2160分辨率的电脑上更好的浏览,我们将基本字体增大到22px,同样,在800*600分辨率的平板电脑上,我们将基本字体减小到14px。现在两个设定断点(一大一小)上网站的布局已经完全改变了。在分辨率比较大的电脑上显示的网站上,1.4em的标题,基本字体22px,这意味着1.4em等于30.8px,但在分辨率较小的平板电脑上,1.4em的标题,基本字体14px,这里1.4em等于19.6px。从这可以看出em在本质上是可伸缩的,尽管网站字体已经变成大或变小,我们都无需担心网站布局的破坏,因为它会随着字体的变化适当进行自我调整。只要我们好好利用这些相对单位,响应式网站的整体布局和排版就可以很美观。
 
对于响应式设计,你是否有进入以上的某个误区?响应式网站设计是大势所趋, 新网网建服务商提供了一系列精美的响应式网站模板,你可以随心挑选快速建站;结合内容和设备设置断点,网站在移动端上更适合;字体排版、网站布局美观典雅;响应式设计可以保证你的网站在众多设备上都有一致的表现力;在建站过程中你有哪些想法还可以和我们的设计师一起交流切磋。