正则表达式 懒人_懒人的响应式排版指南
正则表达式 懒人
排版可以说是任何网站设计中最重要的部分。 空白页上巨大的标题可能看起来像一个极简主义者的梦想,但当我们开始为越来越小的设备开始缩小页面时会发生什么?
嗯!!! 一切都破裂了,看起来糟透了。
这就是为什么我们需要响应式排版。 我们需要可以自行调整以缩小断点的字体。 但是,没有一个头脑正确的人愿意为页面上的每个印刷元素重新设置所有基线样式的麻烦。
幸运的是,我们可以更改html
选择器的大小,以便其所有后代继承一个相对较小的大小。
例如
让我们从一些示例厨房水槽标记开始:
<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>
<p>
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.
</p>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
<ol>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>
通过填充我们的html
选择器将其从墙上推开一点,我们将重置所有印刷元素的margin-top
,因为当h1
标签的顶部比应该放置的图像低大约一英寸时,这确实很烦人旁边的。 目前,所有其他内容仍将保留为浏览器的默认设置。
我们在这里使用Stylus是因为,您可能知道,我非常喜欢Stylus的简洁语法:
html
padding: 2rem
h1, h2, h3, h4, h5, h6, p, ul, ol
margin-top: 0
良好的开端,但是大字体和小字体的大字体现在是一个很好的趋势,所以让我们添加一下。 我们还将添加一些line-height
以确保我们的段落看起来不错。
html
padding: 2rem
font-size: 24px
font-weight: 100
line-height: 1.5
h1, h2, h3, h4, h5, h6, p, ul, ol
margin-top: 0
线高修复
但是现在我们的元素在margin-bottom
有一个很大的margin-bottom
,而我们的页眉也有一个很大的line-height
。 幸运的是,这是一个快速修复:
html
padding: 2rem
font-size: 24px
font-weight: 100
line-height: 1.5
h1, h2, h3, h4, h5, h6, p, ul, ol
margin-top: 0
margin-bottom: 1rem
h1, h2, h3, h4, h5, h6
margin-bottom: .5rem
line-height: 1.1
那里! 我们的懒惰排版已经完成。 我们错过了很多印刷元素(块引用,定义列表等),但是在遇到它们时可以随时将它们添加到样板中。
视口较小
现在,再次,当我们收缩视口时会发生什么? 我们的字体看起来糟透了。 这很难阅读,将要求用户轻扫几次才能阅读段落。
因此,通过添加一些媒体查询并在每个断点处更改html
选择器的font-size
解决此问题:
html
padding: 2rem
font-size: 24px
font-weight: 100
line-height: 1.5
@media (max-width: 900px)
font-size: 20px
@media (max-width: 500px)
font-size: 14px
h1, h2, h3, h4, h5, h6, p, ul, ol
margin-top: 0
margin-bottom: 1rem
h1, h2, h3, h4, h5, h6
margin-bottom: .5rem
line-height: 1.1
瞧!
在那里,您可以在五分钟内完成响应式印刷样板。 所有印刷元素的大小均与html
元素有关,因此,通过在较小的屏幕上使用较小的html
字体大小,我们可以按比例减少所有内容。
在CodePen上的全屏演示 。
进一步阅读
如果您对真正全面的响应式排版特别感兴趣,并且想要更详细地定制此样板,我强烈建议Jason Pamental撰写的 A More Modern Scale for Web Typography 。
翻译自: https://webdesign.tutsplus.com/tutorials/the-lazy-persons-guide-to-responsive-typography--cms-22822
正则表达式 懒人
正则表达式 懒人_懒人的响应式排版指南相关推荐
- 响应式 ui 模板_带有即用型模板的响应式图像指南
响应式 ui 模板 by Maciej Nowakowski 通过Maciej Nowakowski 带有即用型模板的响应式图像指南 (A Guide to Responsive Images wit ...
- 不停刷朋友圈的人_有些人一直发朋友圈是什么心态
我们每个人都有智能手机,手机中也必不可少的有微信,而微信的朋友圈是了解朋友最新动态的一个快速的渠道,不过现在发朋友圈的越来越少了,但是有一些人天天发朋友圈天天被他刷屏,而且还不是发广告的,这些人是一种 ...
- 响应已被截断_技术:RWD响应式网站网页设计基本原则
响应式网站网页设计 RWD响应式网站网页设计对于解决多尺寸屏幕问题是个很好的解决方案,从平面的角度切入需克服很多困难,没有固定的页面尺寸.没有毫米或英寸,没有任何限制会让人感到无从下手.随着建立网站的 ...
- 响应式轮播_角度2的响应式轮播组件
响应式轮播 Update (March 22, 2016): Provided a Demo Link which is available on PlunkerUpdate (March 21, 2 ...
- 什么是响应式网页?它包含了哪些要素?_分享:H5响应式公司企业网站(官网)建设制作策划方案...
分享:H5响应式公司企业网站(官网)建设制作策划方案! 从互联网+时代再到在移动互联网时代,从有PC网站.博客.QQ空间.微博.分类信息.B2B,再到有手机网站.APP.自媒体.公众号.小程序--似乎 ...
- vue 数组删除 dome没更新_详解Vue响应式原理
摘要: 搞懂Vue响应式原理! 作者:浪里行舟 原文:深入浅出Vue响应式原理 Fundebug经授权转载,版权归原作者所有. 前言 Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是 ...
- bootstrap 提交表单给后台_基于Bootstrap的响应式后台管理模板Ace
Ace是一个轻量级.功能丰富,基于Bootstrap3的响应式后台管理模板.支持多种皮肤,集成了多种插件,如Bootstrap,jQuery UI等.支持IE 8/9/10/11.Chrome.Fir ...
- 传智书城首页设计代码_(自适应手机版)响应式创意餐饮酒店装饰设计类网站织梦模板 html5蓝色餐饮酒店设计网站源码下载...
模板名称:(自适应手机版)响应式创意餐饮酒店装饰设计类网站织梦模板 html5蓝色餐饮酒店设计网站源码下载 本套织梦模板采用织梦最新内核开发的模板,这款模板使用范围广,不仅仅局限于一类型的企业,创意设 ...
- java响应式网页设计_基于HTML5的响应式网站的设计与实现(论文).docx
毕业论文 基于HTML5的响应式网站的设计与实现 摘 要 随着网络的发展和普及,各类建站技术的更新与运用,现在搭建一个网站的时间和成本越来越低,使得企业官方网站得到了极大的发展.从早期简单的网页展示, ...
最新文章
- MySQL事物系列:1:事物简介
- 海思移植opencv+车辆检测
- 解决VS2010链接错误:LINK fatal error LNK1123: 转换到 COFF
- 【ArcGIS遇上Python】ArcGIS Python实现Modis NDVI批量求年最大值
- kali BEEF-XSS启动报错解决
- python列表用来有序存放一组_python入门第二课------列表
- java properties用法_java中Properties文件加载和使用方法
- April Fools Day Contest 2016 A. Da Vinci Powers
- 1323. 6 和 9 组成的最大数字
- html 请求体 响应体,Http协议抓包详解
- CSS3属性calc函数(CSS3)
- ajaxFileUpload 异步上传文件简单使用
- Python进行停用词表去重
- 鞋店商城小程序开发价值
- 共享计算机扫描,windows系统下怎么共享扫描仪?
- 芳菲也迷人,玩转北京大周边
- 微信为什么不禁拼多多?诱导分享到底怎么判
- java报500算什么错误_jsp中500是什么错误
- 【教程】扫描识别工具Dynamic Web TWAIN使用教程:条码读取器(下)
- ip段各个号段的含义