红宝石

Veröffentlicht am 2016-09-17 |

2016-09-17 风很大

红宝石的奶油小方上的奶油越来越少了

上次买了份不记得名的蛋糕了挺好吃的超嫩超细腻

挺好吃的

蒸馒头

Veröffentlicht am 2016-09-17 |

2016 盛夏

耳濡目染奶奶和麻麻和面俺就不经意间会了

包饺子好烦要揪穄子（貌似是这么写 jizi）擀皮儿剁馅再包

包包子还要发面

馒头简单啊看自己喜好可以用牛奶和面加蜂蜜会更甜哦

先和面

一宿发了

揉好后大枣蒸过超甜

“bomb”膨胀啦

可以吃啦

－－总结－－

王大厨还没吃过呢

豆角排骨面

Veröffentlicht am 2016-09-17 |

中午的豆角炖排骨没吃完还有很多汤

所以就下面条吃啊

阿宝猪排

Veröffentlicht am 2016-09-08 |

2016-09-08

–啰嗦几句–

还记得那次想去慕名去吃阿宝猪排结果去吃牛蛙面垫垫肚子吃到撑么？
这次终于有机会过去吃紧赶慢赶

就怕人太多要排很长时间队啊排队半小时我是可以接受的但是得好吃例如说牛蛙面

（对我就是很喜欢牛蛙面啦啦啦太好吃了）

–下面是图–

去得早或是别的原因竟然不需要排队很多人都带走了

在门口先点好交钱再进去找位子坐有两楼差不多八张桌子
之前看价格也不贵但是这可是传说中的比脸还大的猪排

所以吸取了牛蛙面的经验我和小伙伴点了一份猪排

就怕吃不了啊吃不了啊浪费不好是不是

等了差不多15分钟陆陆续续的上了

油炸基围虾

很正常有点咸
网传很好喝的罗宋汤我觉得一般嗯
小馄饨
正常

那么重点来了！！！
猪排！！！
上来后被吓到说好的比脸大呢我理解为什么是10块一份了
如果比脸大四五十才叫正常

好吧咬一口皮好硬啊肉一点都不嫩
吃进肚子里都觉得咯肚子 “我会不会消化不良啊好可怕”
很失望
就正常的吃好了
临走前又回头望望这家店现在人排起了队

“不会来这儿第二次了”

－－总结－－
“你哭着对我说童话里都是骗人的”

外婆家－姥姥喊你吃饭啦

Veröffentlicht am 2016-09-06 |

2017-01-15 朋友聚餐更

杭州酱鸭

还行再甜一点更好吃不过没河东师傅做的好吃嗯

金针菇

不好吃反正我不喜欢吃金针菇和蒜蓉粉丝虾一个做法放锅蒸连底料的味儿都是一样的

娃娃菜

这个也不好吃和上面菜一个做法可能这是第一次点素菜所以我们总结可能还有很多菜都是这个做法哈哈哈只不过换了菜

沸腾鱼

这个也不好吃一层油上面鱼肉下面黄豆芽肉很嫩其他没什么味道也不辣

我是肉

之前一直想说要不要点份芒果冰沙这几年都很少吃冰了想了想还是算了吧不找刺激了

2017-01-12 生日更新

嗯点了小炒蹄筋、蒜蓉粉丝虾、糖醋里脊、烤肉

小炒蹄筋

合照

结账呵呵哒

一个人点了四个肉菜一个一个上吃了一个多小时静静的听旁桌的两家人聚餐

其实总共也就去吃了不到五次这四五年时间里

有了新菜最近去吃了下有的还不错

所以这里时不时更新我认为好吃的

排序不分好吃先后

－－我是图－－

1.茶香鸡

这个应该不是新菜只是之前没吃过

很多人说好吃

那就点试试吧

一整只鸡 45块

刚上来喜欢吃皮儿肉什么的也入味了

中规中矩

还好

2.蒜蓉粉丝虾

起初我看菜单以为这是个素菜

因为有粉丝而外面的菜一旦荤素搭配一般肉都很少

上来后惊呆了

满满的诚意啊

价钱和从菜市场买虾的价格差不多

关键是虾肉很嫩啊真的很嫩吃到停不下来的那种（哦我在咽口水）

口味有点儿咸所以建议点这个菜配碗饭好好吃啊

我们是肉很多吃不下饭了所以压根就没点饭怕菜吃不完

36块良心

下次如果去还要点这个

嫩嫩的肉

3.爽口拌海草

不上图了每次去都点就没拍

很好吃

一碗十块

第一次包包子

Veröffentlicht am 2016-09-03 |

2016-09-03 周六晴

这周一破天荒的去买了四个包子早上吃两个晚上饿了吃两个（这样我就只需要准备午饭就好啦啦啦啦）

可是一口咬下去面的感觉不对就是不对

算了还是自己包吧
反正我会只是嫌麻烦所以以前从来没包过
罢了外面的包子都不行为了肚子动手吧

－－下面是图－－

于是周五晚上揉面发面醒了一晚上起来就这样了

第一步成功！！！

面如果发不起来那就没招儿了

一早去买了芹菜我喜欢很香的芹菜但最近菜市场好像都没有没办法还是买点儿凑合着用吧

至少有芹菜味儿

一直不明白为什么要把芹菜叶子摘下去只留茎

母上大人说叶子苦不能放在馅儿里

买了一斤肥瘦相间的肉我当时想的是我就一个人吃一斤应该够了吧吧吧～～～

里面有小葱洋葱芹菜

拌之前突然‘嗖’的一声想起来某次看美食节目说饺子馅最好放点儿水拌均匀后肉会吸收水分变得更嫩不至于馅吃起来干

于是我又加了水

其实也没发多少面目测十几个包子

擀皮儿

准备包吧

看吧吸收了水之后确实不错

一直是左手包包子的啦啦啦

我最多捏过13个褶儿所以很好奇狗不理十八个褶儿是咋捏出来的

一部分

锅小

‘不要挤不要挤我先去蒸桑拿等会让主人先吃我嘛’

结果额还剩了这么多肉馅

明天包煎饺好了

出锅啦啦啦

一口就能咬到肉的感觉真好

－－后记－－

还是喜欢自己包的包子

小九USB版＋金属项链到啦

Veröffentlicht am 2016-08-30 |

2016-08-30 晴秋高气爽

刚刚结束了鸟巢三场的演出激动不？意犹未尽不？

首场玛甜甜的钢琴曲伴着他被风吹乱的头发是否成了你心中的唯一

（喂喂喂不要笑啦没看到玛莎很严肃的在唱歌呢么）
尾场看到有人求婚哇咔咔多有纪念意义啊
废话不多说上图
温馨提示：多图慎点记得开wifi 别用流量
－－我是图－－

八月末到了最近一直在跟usb和上海站票子的进度然而顺风一直没物流信息

早上偶然刷贴吧哇咔咔 usb发货啦赶紧查物流在配送哎好期待

上午开完会就看到桌子上躺着一个四方的盒子

发件人‘五月天吧’啦啦啦

包的很好很严实

#金属项链

金属项链外包装

每个细节都不想错过都要好好看看

一本歌词一本宣传册

打开后好重质感真金属啊

好像usb 这是啥寓意谁来解释下感觉真的好金属质感

带着会很沉啊可是还要带等着试试感觉要是轻点儿就好了那么沉

#USB

啥还有个磁带这年头谁还用磁带啊 ‘用啥播呢’ ‘哦记得小时候家里有个很长的录音机十几年过去了没准还能用’
、

打开后我就看看到处都是小九的标志

画风还是那么的小清新尽管大爷们已经四十而立了

‘咦这是啥有机密开关？’

打开后变成了这样哦原来这个是usb啊差一点就被骗了呢

又见小九标志

终于看到那小小的USB了

这设计真捉急

插到电脑上真的很小虽然我很久没用过usb了

宣传册里有使用指南

主要问题是我插了几次又不敢使劲所以一度以为usb坏了

后来大力出奇迹终于电脑反应出来了有MAYDAY!!!

打开后的目录

双击hq文件夹哇咔咔好炫酷哦大爷们用心良苦

下面图看仔细哦

有播放／暂停／下一首／上一首按键按的时候还会有模仿机械按钮的声音

体验很好真的很逼真

最后在桌面上会出现这个软件的图标呜呜呜

感动的一塌糊涂

dock栏中显示的好喜欢啊啊啊啊啊

宣传册几张图回去好好欣赏

玛甜甜那飘逸的长发

大合照嗯开心

－－总结－－

多听五月天必成好青年

【译】practical-svg

Veröffentlicht am 2016-08-22 |

原文地址：Practical SVG
原文作者：Chris Coyier
译文出自：掘金翻译计划
译者： MAYDAY1993
校对者： zhouzihanntu hpoenixf

可能你想控制任何你放在网上的图片的尺寸，嗨！就是你！ Logo !你应该是这个大小：

1	<img src="logo.png" class="logo" />

.logo {
  width: 220px;
  height: 80px;
}

下面继续

并且图片也应该能任意控制大小。

但是如果你正在缩放的元素恰好是 svg，结果可能并不是你期待的。定义 svg 的尺寸比定义 img 复杂一点。说这句不是吓你喔。复杂不是坏事，因为它给你更多的控制并且多了一些有趣的可能性。

当你涉及 SVG 图片的尺寸，记住下面两个概念：

viewport 就是元素的高度和宽度：即 SVG 图片可见区域的大小。经常直接在 SVG 上或者通过 CSS 设置width 和 height属性。
viewBox 是 svg 的一个属性，来确定坐标系和纵横比。四个值是x, y, width, 和 height。

我们一般这样做：

1
2
3

<svg width="100" height="100" viewBox="0 0 100 100">
<!-- alternatively: viewBox="0, 0 100, 100" -->

在这种情况下，视图大小和 viewBox 完全一致(Fig 6.1)。 SVG 将会在它视觉上占据的那个地方展现出来。
CodePen Embed

Fig 6.1: viewport 和 viewBox 完全一致。这发生在没有设置svg的长度或宽度（属性或 CSS 都没有），或者如果你设置了长度和宽度，它们和viewBox的纵横比保持一致。

现在我们将宽度和高度翻倍，像这样：

1	<svg width="200" height="200" viewBox="0 0 100 100">

svg 会在 200 200 的元素的左上角占据 100 100 的区域么？不会， svg 内的每个都会在新的更大的空间扩大(Fig 6.2)。
CodePen Embed

Fig 6.2: viewport 变大而 viewBox 保持不变，图片放大来适应 viewport。

正方形的纵横比依然很匹配。这就是为什么将 SVG 内任何地方的数值认为是像素是没用的，因为他们不是像素；他们只是在一个任意的坐标系里的数值。

那么，如果纵横比不匹配怎么办？

1	<svg width="300" height="75" viewBox="0 0 100 100">

默认情况下，SVG将尽可能大的展现自己，沿着最长的尺寸居中(Fig 6.3)。
CodePen Embed

Fig 6.3: viewport 变大了，但不再匹配 viewBox 的纵横比。所以默认情况下，图片在没被裁剪的情况下尽可能大的展现出来，并在比例大的方向居中。

如果你想重新控制这个行为， svg 元素有个属性会起作用！

`preserveAspectRatio`

像这样：

1	<svg preserveAspectRatio="xMaxYMax">

这个值的 x 和 Y 部分后面是 Min, Mid, 或 Max。 SVG 通常在视图中居中的原因是有个默认的 xMidYMid 值。如果你把值改成 xMaxYMax，这就告诉了 SVG：确保在水平方向上尽可能靠右，竖直方向上尽可能靠底部。然后在没有裁剪的情况下尽可能的大。

“没有裁剪”部分是 preserveAspectRatio 的另一个方面。默认值是 xMidYMid meet －注意下 “meet” 。你可以用 slice 来代替 meet 意思是：完整地填充区域；裁剪也可以。

和 meet 组合会有九种可能的对齐的值(Fig 6.4)。

Fig 6.4: 带 meet 值的 preserveAspectRatio 的例子。

和 slice 组合也有九种可能的对齐的值(Fig 6.5)。

Fig 6.5: 带 slice 值的 preserveAspectRatio 的例子。

为了证实这个想法我做了一个测试工具。关于这个主题 Sara Soueidan 也写了一篇有深度的文章，她很好的研究了把这个想法关联到 CSS。 background-size 属性有两个值：contain 和 cover。contain 值的作用是“确保整个图片在屏幕缩小的情况下仍然可见”，就像 meet。cover 值的作用是“确保图片覆盖整个背景区域，即使图像的某些部分可能被裁减，”，就像 slice。

就算是对齐部分也有一个对应的 CSS 属性： background-position。默认的 background-position值是0 0，意思是 “top left”。就像 xMinYMin 一样。如果你把它改成 50% 100%，那就像 xMidYMax！

Fig 6.6 这些例子让联系更清晰。

preserveAspectRatio 值和 CSS 属性


`preserveAspectRatio= "xMinYmax meet"`	`background-position: 0 100%; background-size: contain;`
`preserveAspectRatio= "xMidYMid meet"`	`background-position: 50% 50%; background-size: contain;`
`preserveAspectRatio= "xMinYmax slice"`	`background-position: 100% 0; background-size: cover;`
`preserveAspectRatio= "xMidYMid slice"`	`background-position: 50% 100%; background-size: cover;`

Fig 6.6: preserveAspectRatio 的值和与之相似的 CSS 属性

记住：他们在代码不是通用的；只是概念上相关。

如果你不想考虑纵横比，让 SVG 随视图大小缩放，就像光栅图像那样呢？把 preserveAspectRatio 属性设置为 ‘none’ 吧(Fig 6.7)!

1	<svg preserveAspectRatio="none" viewBox="0 0 100 100">

CodePen Embed

Fig 6.7: preserveAspectRatio="none" 的例子。

Amelia Bellamy-Royds 写了篇关于缩放 SVG 的全面的文章，在文章中她叙述了 svg 实际上可以包含其他的有不同纵横比和行为的 svg，所以你可以让一张图部分缩放，其余部分正常显示；这对于 svg 来说又酷又独特。

画板尺寸缩放的方法

当你在编辑软件中画 SVG，软件可能提供给你某种画板来在上面画。这不是个技术的 SVG 术语；它实际上是 viewBox 的一个视觉上的比喻。

假设你在为一个网站设计一整套图标。一种方法是让所有的画板接触图标的每个边(Fig 6.8)。

Fig 6.8: 在 Adobe Illustrator 中图片接触到边缘的例子。

这儿有个快捷的小技巧来在 Illustrator 里裁剪画板：选择画板工具，然后在 Presets 菜单选 “Fit to Artwork Bounds”(Fig 6.9).

Fig 6.9: 在 Adobe Illustrator 里菜单选项可以根据图片的边缘重新定义画板大小。

这个技巧的优点是对齐(Fig 6.10)。如果你想把这些图标的任一边和任何其他的东西对齐，实现起来很简单。并不存在你需要应对的魔幻之处或需要不断调整的定位样式。

.icon.nudge {
  position: relative;
  right: -2px; /* UGHCKKADKDKJ */
}

Fig 6.10: 图标无间隙地和边缘对齐。

这个裁剪技术的缺点是相对的尺寸。想象下你采取一般的方法来定义图标的宽度和高度，像这样：

.icon {
  width: 1em;
  height: 1em;
}

一个又高又细长的图标将会缩小来适应那个区域，并且可能显得很小。或是你可能在尝试有意把一个小的星星形状作为一个图标，期待着星星有一个正方形的纵横比，因此会放大来填充区域，然而结果比你想要的还大。

这有个例子关于两个图标的尺寸都设置成正方形(Fig 6.11)。“expand” 图标看上去很正常，因为它有一个正方形的纵横比来调整。但是 “zap it” 图标有一个高高窄窄的纵横比，所以它看上去很小，像在同样的正方形区域上浮动。

Fig 6.11: 两个图标在一个按钮中尺寸是同样的正方形区域。上面的一个响应的很好，但是底部的那个很奇怪的在区域中浮动。

另一个方法是制作尺寸一致的画板(Fig 6.12)：

Fig 6.12: Illustrator 里的画板大小相同的图形的例子。

优点和缺点恰恰是可逆的。你可能遇到对齐的问题，因为并不是所有图标的边会碰到 viewBox 的边，这是沮丧的并且有时候可能需要调整(Fig 6.13)。

Fig 6.13: 你可以调整图标的相对大小，但那样会让对齐更困难。

但是你不会有相对的尺寸问题，因为对于所有的画板来说 viewBox 是一样的。如果任何一个图标看上去太大或太小，你可以调整画板来使其符合这一系列。

既然我们在了解尺寸，现在是时候来研究 SVG 是如何适配响应式设计的弹性世界的。

响应式的 SVG

响应式设计的一个特点是流式布局。内容－包括图片－被设计来适应它的容器和屏幕。如果响应式设计对你来说是陌生的，关于这个主题 Ethan Marcotte 在 2010 年的重要的文章是一个很好的选择来开始了解响应式设计。SVG 与响应式设计很适合。

响应式设计是弹性的。SVG 也是！它在每个尺寸都呈现的很好。
*响应式设计是一门关注一个网站在任一浏览器中如何呈现和如何表现的哲学。相对小的 SVG 文件和像一个 SVG 图标系统的性能优先的策略就是响应式设计的一部分。

但可能 SVG 与响应式设计最显著的联系是对 CSS 媒体查询的可能性。媒体查询基于浏览器窗口的高度或宽度等因素用 CSS 来移动，隐藏或显示元素。这些元素能是任何东西：侧边栏，导航栏，广告和你有的任何东西。也可能是 SVG 元素。

想象一下，有一个图标能基于可用空间的大小展现不同层次的细节。这就是当 Joe Harrison 设计一个真正简洁的用著名图标设计的 demo时想到的东西, (Fig 6.14).

Fig 6.14: Joe Harrison 的不同尺寸迪斯尼图标的 demo。

在网站上，我们经常能用其他的图片来替换图片。这里吸引我们的是我们并没有替换图片；它们都是同一张图片。或至少它们能是同一张。签名 “D” 和在最复杂的图表版本中使用的就是同样的 “D”。

在 CSS 中通俗的写法。

我们像这样组织 SVG：

<svg class="disney-logo">
 <g class="magic-castle">
    <!-- paths, etc -->
  </g>
  <g class="walt">
    <!-- paths, etc -->
  </g>
  <g class="disney">
    <path class="d" />
    <!-- paths, etc -->
  </g>
</svg>

顺便说一下，在 Illustrator 中这很容易实现(Fig 6.15)。在这里你写的组件和名称在以 SVG 输出时变成 ID，你能使用这些 ID 来定义样式。然而，我个人更喜欢使用类因为它们不是唯一的（所以你不会突然遇到在页面上有多个同样的 ID）并且类有一个更低更好管理的 CSS specificity 特性权重。在一个代码编辑器里非常简单地就能用查找替换操作把 ID 变成类。

Fig 6.15: 在 Adobe Illustrator 中命名的层和形状。

对应的CSS像这样：

@media (max-width: 1000px) {
  .magic-castle {
    display: none;
  }
}
@media (max-width: 800px) {
  .walt {
    display: none;
  }
}
@media (max-width: 600px) {
  .disney > *:not(.d) {
    display: none;
  }
}

注意，有一个人为的例子在不同的断点隐藏部分图片，但是这就是你将要做的，同时可能有一些尺寸调整。你能用 CSS 做的任何事情都列在这儿了。可能某些动画在某些断点是合适的，但是在其他并不合适。可能（译者注：求助攻）。可能你改变一些填充颜色来简化相邻的外形。

事情会更有趣！取决于 SVG 的使用方式，这些媒体查询实际上可能是不同的。作为 img, iframe, 或 object 使用的 SVG 有它自己的视图。这就意味着嵌入在内的 CSS 以此为基础来响应媒体查询，而不是整个的浏览器窗口视图。这就意味着你是基于图片的宽度来声明以图片为基础的媒体查询，而不是整个页面的宽度。

这是个非常吸引人的想法：一个元素基于它自己的属性安排自己，而不是页面。我是这么宽么？对。我是这么高么？也是。_那样， SVG 响应它所在的情景而不是它所在的任意文档。

正如我写的，这在 CSS 中称作“元素查询”，但是实际上在正常的 HTML/CSS 中并不存在。又一次地，SVG 具有超前意识。