《CSS揭秘》总结二：超实用的项目开发技巧

读《CSS揭秘》总结一

前言：文章是看《CSS揭秘》书边看边总结的笔记

目录：

• 减少重复
  1.考虑css值是依赖关系的时候，要用比例代码表达。
  2.灵活控制
  3.使用currentColor变量简化代码
  4.使用inherit继承关键字
• 关于响应式布局的设计
  1.响应式布局的设计建议

---------------------------------人工分割线---------------------------------------------------

减少重复

1.考虑css值是依赖关系的时候，要用比例代码表达。
例如：

行高是字体的1.5倍
font-size: 20px;
line-height: 1.5;

字体是父字体的1.25倍
font-size: 125%;
line-height: 1.5

巧用em
padding: 0.3em 0.8em;
border-radios: 0.2em;
text-shasow: 0 -0.5em 0.05em #fff

Tips: 尽量多使用比例的方式能使得你的修改，适应设备等非常灵活、简便

2.灵活控制

这是你设计的按钮样式。

.button {
    font-size: 125%;
    line-height: 1.5
    padding: 0.3em 0.8em;
    border-radios: 0.2em;
    background: blue;
}

稍加改造就能变成取消按钮、确认按钮的样式

.button .cancel {
    background: red;
} 
.button .ok {
    background: green;
} 

Tips: 你可以把这个按钮的样式放在你的全局css
库中，class加上button就是一个按钮样式，class再加上ok就是一个确认按钮了。

3.使用currentColor变量简化代码

currentColor顾名思义是当前颜色，更准确的说是当前文本的颜色。
例如：你要设计一个按钮，样子是中间文字加上边框。样子想象一下，那么你会希望这个边框的颜色跟文字的颜色是一致的，这样美美哒。

以前的实现方式 vs currentColor的实现方式：

旧：
button {
    color: blue;
    border: 1px solid blue;
}
新：
button {
    color: blue;
    border: 1px solid currentColor;
}

Tips: 这种方式有超级都的应用场景，在你开发的时候只要想起有这个变量就一定有帮到你的地方

4.使用inherit继承关键字
简单理解就是某个属性的值跟随父布局的值
例如：当你遇到

<style>
    span {
        color: green;
    }
</style>
<div class="parent" style="color:red">
    123<span class="child">456</span>
</div>

此时运行的结果是（红123）（绿456）；
如果你想那个child的颜色跟parent的保持一致怎么办？

style再加一个
.child {
    color: inherit;
}

这样的话就是红123456；
parent改什么颜色child就跟着变成什么颜色。

Tips: 所以当遇到父布局跟子元素之间有联系的属性可以考虑使用继承的方式实现

关于响应式布局的设计

在过往的开发中会大量使用媒体查询（Media Query）去实现响应式的布局（适应不同分别率的设备），但媒体查询使用的越多，你的代码就会变得越难以维护。本人并无这种开发经历，简单跳过。
这里引入一位国外大神的语录：

Basecamp的设计师：
结果我们发现，想让网页在一堆不同的设备上合理展示，只需要在
最终产品上添加一点 CSS 媒体查询就可以了。这件事情之所以这么简单，
关键在于我们的布局原本就是弹性可伸缩的。因此，优化网页在小屏幕上
的表现，其实只意味着把一些外边距收拢到最小程度，然后把因为屏幕太
窄而无法显示成双列的侧栏调整为单列布局而已。

下面是关于响应式布局的设计建议：

• 尽量使用百分比来取代固定长度，实在不行就考虑与视图相关的单位（vw,vh,vmin,vmax等）;这种值会被解析成视图的百分比
• 当你需要在较大分辨率下得到固定宽度时，可以使用max-width而非width,因为max-width具有一定的适应性，可以兼顾到小分辨率的情况
• 为（img、Object、Video、iframe）等设置max-width:100%
• 加入图片要铺满一个容器，并且不受容器尺寸影响，可以使用background-size:cover实现，但往往从接口中拿回一张大图然后缩成一个小图去显示都是很浪费的，应为浪费浏览，浪费对图片的解析
• 善于使用流式布局；例如想展示一个横向滚动的列表，你可以定义你每个item的宽度（假设宽度=50%),这样的话无论是pc，还是手机最终显示两个；例如，你将item固定200px宽，那么在电脑、手机显示效果都是固定宽度的方式，电脑屏幕宽一点的话就能多显示几个，手机就显示少一几个而已。

我们的思路就是千方百计的不使用固定宽高，如此一来你的网页能有一个不错的自适应屏幕的能力了，再搭配媒体查询那应该能解决更多的屏幕适应问题。

这一篇文章就到这里；后续会更新~