Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

前端读书寻宝记之读《包容性Web设计》有感 #25

Open
godkun opened this issue Dec 5, 2018 · 0 comments
Open

前端读书寻宝记之读《包容性Web设计》有感 #25

godkun opened this issue Dec 5, 2018 · 0 comments
Labels
读书笔记

Comments

@godkun
Copy link
Owner

godkun commented Dec 5, 2018

写在最前

前端读书寻宝记系列，会分享一些过去、现在、未来我亲自阅读过的书，选择性的分享一些我个人认为还不错[可能你没有读过]的书籍，同时总结一下我个人认为此书的精华所在。推荐小伙伴们去看看，当然，如果没有时间去阅读，那可以关注我的分享，基本可以从我的分享中了解我分享出的书籍的精华。当然大家有什么好书，也可以在评论区分享出来，一起进步哈~

Heydon Picering * 著 —— 于坤 * 译 2017年7月第一版

当当图书封面如下图：

image
当当传送门

写在最前

很快看完了这本书，这本书很薄，162页，但是里面的一些知识点还是很棒的，就是很多人可能没有注意到的细节，或者说根本想不到的细节，我把它们总结下来，写篇心得吧。

先说能想到的知识点

这里的tips虽然很多大家都已知道，但是还是比较不错并且值得总结出来的tips。

1: 面对对象设计OOP

数据结构设计需要考虑面对对象，如何用对象思维进行抽象，从而使数据结构变得更加友好，这是一个很值得下功夫的过程，也是一个可以看得见能力成长的过程。

2: 文档类型Doctype

如果没有声明文档类型，那么浏览器将会不知道怎么解释内容，可能会降级到不符合规范的兼容模式，也就是通常所说的怪异模式。此时布局和交互会变得不可预知，容易出错。

3: 语言属性lang

lang属性对于SEO非常重要，必须设置。

4: 要允许双指缩放

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

这个意见我也不知道对不对，书中建议不要在content属性里面设置minimum-scale=1.0, maximum-scale=1.0, user-scalable=no，也就是不要随意禁止用户缩放。因为有时用户会想放大看清楚细节等。其实这个没有对与错，看产品经理怎么定，有锅产品背。。。

5：字体

字体大小要用rem

6: 关于absolute和fixed

如果使用absolute和fixed定位，那么当视口或内容调整大小时，定位元素不会与文档的其余部分一起reflow，导致布局问题，一些元素可能会被挡住或者延伸到视口之外看不见，所以一般不要使用绝对定位。

这里说一下项目中在使用定位时，各种定位方式的优先级，通常情况下，我们应该优先使用flex，当flex无法解决一些场景的时候，正常情况下，我们肯定会优先考虑relative/absolute。但是通过上面总结，我们发现绝对定位有时也会导致一些布局问题，如果出现这种问题了，那我们就应该考虑一下float了。其实我感觉对float理解的比较深刻的话，用起来也不是那么坑爹吧。关于float布局，我写了篇挺不错的文章，可以看看可能是最全面最易懂的解析前端浮动的文章。

充满惊喜的细节

视口viewport

如果使用了vh，vw单位，则文字的大小会根据视口的宽高来自适应，也就是隐式的响应式文本，不再需要媒体查询。但有一个问题，如果元素使用视口单位，则就无法随着页面缩放。为了解决这个问题，可以将视口单位的值加上em单位的值恢复缩放功能，这样就能确保页面有最小字体尺寸。原理就是 1em + (0 * 1vw) 仍然是1em

html { font-size: calc(1em + 1vw); }

这样文本内容就会随着视口同比例缩放了。

备注：font-size: calc(1em + 1vw);是渐进增强的，无法识别的时候，浏览器会回退到浏览器默认设置，也就是说，如果不兼容，浏览器会使用原定的方式展示文本。

字体

Web字体通常是大型的资源，应该被视为增强内容。FOIT(Flash of Invisible， 不可见字体闪现)现象应该避免，如果字体文件无限加载，浏览器就会卡在没有文字的页面，也要避免。

诀窍就是：加载页面后再加载字体，使用 onload 事件触发，要实现这个效果，字体必须用base64编码嵌入到样式表中。同时为了解决FOIT，就必须接受FOUT(Flash Of Unstyled Text，无样式字体闪烁)。

行距(行高)

行高要设置成无单位的相对值，建议1.5倍间距

不要这样写

p{
    font-size: 16px;
    line-height: 24px;
}

要这样写：

p{
    font-size: 1rem;
    line-height: 1.5;
}

对比度

在任何情况下，都应该避免文本和背景颜色的低对比组合。比如在白色背景上使用浅灰色字体。

关于图像

位图(bitmap)，又称栅格图(raster graphics)或点阵图，是使用像素阵列(Pixel-array/Dot-matrix)来表示的图像。

关于curl

依赖js的静态内容不符合Web设计基础，也就是说 不能用curl访问，就不存在Web中。

PS：这个还是很酷的，科普一下，curl是什么呢，其实curl是linux系统中的一个命令，专门用来发送http请求的命令，然后可以在命令行中打印出http响应内容。比如下图：


所以说如果不能用curl访问，就说明不存在Web中。

防御性编程

会经常在源代码中留下许多不必要的内容

<p></p>
<p></p>
<p></p>

这种就是不必要的内容，应当用防御性编程从流中删除空元素，可以使用display: none;删除元素的布局，包括他们的margin，这里我们可以使用display: none;配合empty伪类来删除所有空元素，代码如下：

main: empty {
    display: none;
}

使用flexbox实现网格，为书中代码片段

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  html {
    font-size: 20px;
  }
  .flex1{
    display: flex;
    flex-direction: row;

    /* 如果没有足够空间将它们放在一起的话，就自动换行显示 */
    flex-wrap: wrap;

    /* 对称分布 */
    justify-content: center;
  }
  .flex1 li {
    /* 项目将扩充超过10em的宽度以填充可用空间 */
    flex-grow: 1;
    
    /* 确保项目可用收缩 */
    flex-shrink: 1;
    
    /* 列会随着字体大小自动变化 */
    flex-basis: 10em;
    max-width: 20em;
    background: skyblue;
  }
</style>
<body>
  <ul class="flex1">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>6</li>
    <li>6</li>
  </ul>
</body>
</html>

点击触发TP[可自行进行修改来实时查看布局变化]： CodeOpen传送门

flex-basis可以在元素级别定义理想宽度，通过切换flex-grow和flex-shrink，网格元素可以围绕这个理想宽度展开或者收缩，从而在无限范围的视口中保持完整有序的网格。

关于flex-basis

flex-basis可以在元素级别定义理想宽度，通过切换flex-grow和flex-shrink，网格元素可以围绕这个理想宽度展开或者收缩，从而在无限范围的视口中保持完整有序的网格。在flexbox算法中，flex-basis的值是当前项目理想的宽度，如上面代码中，每个项目尝试为10em宽度，然后共享剩余可用空间。

备注：我看网上一些前端推荐的书籍，其实感觉总缺点什么，就是那种get不到好的感觉，一篇文章列几十本书，一本一句话，或者几句话就结束了。。。本人读的书也不少了，就想分享一些读书的心得体会吧，一篇一篇来，就当做记笔记加review了，人菜勿喷。

文末可爱声明： 我没有自己去扩展书中没有的知识点，这样才能更准确的把此书的真实情况表达出来，希望可以给大家一个参考。我一般写的读后感都是我感觉挺不错的书籍。但也不限于前端，总之。

Let us reading now.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
读书笔记
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@godkun