首页 > 代码库 > 懒人的响应式排版
懒人的响应式排版
本文由本人翻译自: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 html2 padding: 2rem3 4 h1, h2, h3, h4, h5, h6, p, ul, ol5 margin-top: 0
这是一个好的开始，但是大一点的字体会是一个号的趋势，所以这里我们加上样式。同样的我们会加入
line-height 让段落看起来漂亮一点。1 html2 padding: 2rem3 font-size: 24px4 font-weight: 1005 line-height: 1.56 7 h1, h2, h3, h4, h5, h6, p, ul, ol8 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: 1rem10 11 h1, h2, h3, h4, h5, h612 margin-bottom: .5rem13 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: 14px10 11 h1, h2, h3, h4, h5, h6, p, ul, ol12 margin-top: 013 margin-bottom: 1rem14 15 h1, h2, h3, h4, h5, h616 margin-bottom: .5rem17 line-height: 1.1
搞定！
至此已经成功,5分钟搞定了一个响应式的页面排版实例。所有的元素都在html 之中，所以我们可以设置
html的字体大小以此来适应较小的屏幕在CodePen下的全屏演示。.
懒人的响应式排版
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。