无懈可击的Web设计
2014-08-17
##构建无懈可击的 Web 站点
标题党。那本书也是标题党，这是一算是读书笔记或者总结吧。
昨天去图书馆逛了下随便借了几本书，其中一本就是《无懈可击的 Web 设计》，觉得应该不错吧，而且之前在当当上好像也看过这本书貌似评价还不错。借回来就开始看了，今天就全部看完了。怎么说这本书还是写的不错的，但是对我来说看完并没收货到啥价值。因为里面的内容基本上我都了解而且都是这么做的。这书主要讲的就是用 html5 和 css3构建灵活的网页。测试一个网页的灵活性就是放大
所以说他这个无懈可击就是灵活的意思，真的是标题党啊。不过作为新手来说还是有点点作用的。
我总结下里面的内容：
1. 使用灵活的文字大小，尽量使用相对大小的单位(em,rem,关键字)来控制文字大小，因为考虑到有的用户浏览网页可能会放大网页来看，而如果你用的都是绝对单位px来控制网站字体大小，那么无论你的网页放大多少你的字体在IE/win下是没变的，所以我们要给用户更多的控制权。
但是我发现现在国内有人用em也有部分人用css3里新增的 rem 作单位，但是几乎没看到用关键字来控制文字大小的，不知道什么原因，我看了下关键字 small 在chrome下默认的大小是13px;medium 的大小则是16px;large 则是18px.
2. 还有一个就是不要设置一些横向页面组件的高度，其实这个也是为了灵活性考虑的，比如一个导航栏，很多人喜欢按照设计稿给导航栏的一固定高度，但是要是哪天设计师或产品狗需要把导航栏的字体弄大一倍时这时候可能会出点问题了，我们一般用padding或margin控制高度就可以了。
3. 采用浮动布局，书中举了一个常见的一个布局页面：一边显示图片一边显示标题和说明，然后下一行则右边图片左边文字这种交替显示。很显然这采用浮动布局会很好设置的，再分别给两边的内容设置百分比宽度。不过他这里用dt,dd布局我到时很少见，我一般只在网站比较小的一部分内容里用到dt,dt标签布局，而整个页面用这个还没试过，下次试试。
4. 第四个就是我们常说的语义化吧，代码标签语义化，即使在没有图片没有加载css的情况下都能很好的显示内容。毕竟有的地方网速慢，都不加载图片的。
5. 还有就是关于采用流动布局和弹性布局的，其实我个人不太喜欢用 em 因为觉得有时候不愿去算，像用em的话肯定不能再多集嵌套下使用，不然计算麻烦然而弹性布局就是用 em单位来布局的，弹性布局一致性是最理想的，也就是说在网页里margin,padding啊，行高啊啥的都用em 来作为单位。嗯，但是哪有这么好的事，毕竟一些图片广告啥的啊都是固定宽度的。所以一般我喜欢用流动布局。这里面他讲到一个知识点就是用 box-sizing 盒模型，其实 bootstrap 就是用的这个盒模型，这个盒模型在布局的时候有事很方便的，因为比如你给定一个框的宽度，这个宽度就包括了内边局和边框。
6. 最后作者还通过一个例子来应用前面提到的知识点，总之这书讲的还算清楚，适合新手阅读。