懒人的响应式排版

本文由本人翻译自:http://webdesign.tutsplus.com/tutorials/the-lazy-persons-guide-to-responsive-typography--cms-22822
 
网站设计中争论最多的部门就是排版。在一个空白的页面放一个巨幅的标题会让你感觉自己像是一位极简抽象主义画家。但是将页面放到小一些的设备时会发生什么样的情况呢？
 
 
嗯，这效果看起来非常的糟糕。
 
这就是为什么我们需要用到响应式排版。我们需要让页面在遇到边缘时自己会调整。但没有人愿意去针对每一种不同的布局去调整他们的样式。
 
幸运的是现在我们可以去修改 html选择器以致于它的子节点会继承一些较小的尺寸。
 

就比方说

让我们从一些耳熟能详的标签开始:
 1 <h1>Header 1</h1>
 2 <h2>Header 2</h2>
 3 <h3>Header 3</h3>
 4 <h4>Header 4</h4>
 5 <h5>Header 5</h5>
 6 <h6>Header 6</h6>
 7  
 8 <p>
 9   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit iusto adipisci, cupiditate animi, itaque qui aspernatur vel corrupti labore minima, excepturi ab, fuga rem dolores. Ratione sunt autem iusto aliquid.
10 </p>
11  
12 <ul>
13   <li>List Item 1</li>
14   <li>List Item 2</li>
15   <li>List Item 3</li>
16 </ul>
17  
18 <ol>
19   <li>List Item 1</li>
20   <li>List Item 2</li>
21   <li>List Item 3</li>
22 </ol>

 

使用padding填充html使得我们的元素看起来没有那么贴近边界。 当然我们会使用 margin-top 去调整我们的元素，不然当一个h1 标签离一张原本应该紧挨着的图片有一英寸的距离，那会让人相当郁闷。其他元素则会保留浏览器默认的样式。在这里使用了Stylus，因为我很喜欢Stylus 简洁的语法
1 html
2   padding: 2rem
3  
4 h1, h2, h3, h4, h5, h6, p, ul, ol
5   margin-top: 0

 

 

这是一个好的开始，但是大一点的字体会是一个号的趋势，所以这里我们加上样式。同样的我们会加入 line-height 让段落看起来漂亮一点。
1 html
2   padding: 2rem
3   font-size: 24px
4   font-weight: 100
5   line-height: 1.5
6  
7 h1, h2, h3, h4, h5, h6, p, ul, ol
8   margin-top: 0

 

行距修复

But now our elements have a huge margin-bottom on them and our headers have a hugeline-height as well. Luckily this is a quick fix:但是现在我们的元素有一个较大的底部距离并且我们的头部也有一个较大的行距。幸运的是这点很容易就可以修复：

 1 html
 2   padding: 2rem
 3   font-size: 24px
 4   font-weight: 100
 5   line-height: 1.5
 6  
 7 h1, h2, h3, h4, h5, h6, p, ul, ol
 8   margin-top: 0
 9   margin-bottom: 1rem
10  
11 h1, h2, h3, h4, h5, h6
12   margin-bottom: .5rem
13   line-height: 1.1

 

瞧，简单的布局已经完成了。
 

较小Viewport下的显示

现在，问题来了，当我们的viewport收缩时，会发生什么？我们的排版看起来不咋滴。这样当用户浏览一小段时，就已经需要不断地去拉拽滚动条
 
让我们使用media 去调整字体大小来解决这个问题吧
 1 html
 2   padding: 2rem
 3   font-size: 24px
 4   font-weight: 100
 5   line-height: 1.5
 6   @media (max-width: 900px)
 7     font-size: 20px
 8   @media (max-width: 500px)
 9     font-size: 14px
10  
11 h1, h2, h3, h4, h5, h6, p, ul, ol
12   margin-top: 0
13   margin-bottom: 1rem
14  
15 h1, h2, h3, h4, h5, h6
16   margin-bottom: .5rem
17   line-height: 1.1

搞定！


至此已经成功,5分钟搞定了一个响应式的页面排版实例。所有的元素都在html 之中，所以我们可以设置 html的字体大小以此来适应较小的屏幕
 
 
 
在CodePen下的全屏演示。.
 
 
posted @ 2014-12-17 21:55  青苔1943  阅读(660)  评论(0)  编辑  收藏  举报