先给答案，后面再解释。
Web 页面的字体在开发（MAC）和以移动端为主的实际生产环境（iOS 和 Android）上的最佳默认字体设置为。
body {
font-family: "PingFang SC", "Hiragino Sans GB", "\5FAE\8F6F\96C5\9ED1", "Helvetica Neue", Helvetica, Arial, sans-serif;
}之前有写过一篇非等宽图片列表的布局的博文，那只是这种布局之前的叫法，为了和常规的等宽瀑布流布局做区分，根据这种布局的特性（整行是等高的），那么就叫等高瀑布流布局吧。
怎么又拿这种布局出来说事？最近几天在对以前开发的360图片搜索结果列表页的图片尺寸和交互效果做一些细节上的调整。同时也对布局的算法做了优化，之前采用的是以宽度裁切为主和夹杂着一些等比缩放的算法，当时是为了让每一行看起来高度都一致。由于宽度裁切的效果会让图片左右边缘部分有损失，而且当时也有图片 hover 时的放大效果在一定程度上弥补了这种损失。这次放弃了宽度裁切，也去掉了 hover 时放大图片的效果，全部采用了等比缩放的算法。
在上一篇博文中谈到的等比缩放的算法其实并不是最优的，还是会有一定的上下或者左右的裁切。研究了一下 Google+ 的相册使用的等高瀑布流布局的缩放，发觉还有一种更优的缩放计算的算法，于是花了两个小时将这种算法推演了出来。这里先检讨下，由于智商上的缺陷，数学绝对是我的弱项，这种算法比之前的要简单得多，之前是走了弯路了。
各大搜索引擎的图片频道的搜索结果页，搜索出来的结果都是较零碎的图片，图片质量、尺寸都是参差不齐的，并限定了每一行的总宽度。这种非等宽的图片列表，在Google+、flickr也都有用到。
最近刚好对360搜索的图片搜索结果页进行了一次重构和改版，对于这种图片布局也花心思研究了一番，接下来说说我的一些处理思路。
非等宽的单个图片要排列到一个固定了宽度的容器中，那么这个等宽的容器就是最大的限制和障碍，开始怀念那种常见等宽瀑布流的布局(没有限制真好)。
先理下基本的需求：
- 1、图片的宽度是不固定的；
- 2、图片的高度是固定的；
- 3、每行图片的总宽度是固定的，所以每行能容纳的图片的数量是无法确定的；
- 4、确保图片质量不变，不能有拉伸变形导致图片失真的情况出现；
- 5、图片之间的间距是固定的；
阅读全文 »
- 13th 08 2013
- JavaScript, XHTML&CSS
- layout, 布局
来自一淘的 WEB 前端的面试题，题目要求如下：
使用 HTML+CSS 实现如图布局，border-width:5px，格子大小是 50px*50px，hover时边框变成红色，需要考虑 IE6+ 和语义化的结构。
题目不难，主要还是考察面试者对 CSS 灵活运用程度。
以下 DEMO 是来自 JavaScript 罗浮宫3群好几个群员的 DEMO。
如果你也有兴趣，不妨试试。
<p>图片的宽度和高度是未知的，没有固定的尺寸，在这个前提下要使图片在一个固定了宽度和高度的容器中垂直居中。最近的在做的项目就有这个需求，所以先把一些常用的方法都收集整理了一下。</p>
<p>下图是理想中的效果图，外部容器的宽度和高度固定，中间的图片宽度和高度未知，但是图片要始终要相对于外部的容器垂直居中。</p>
<div class="art_inner_img"><img src="https://blog.yiguochen.com/wp-content/uploads/2010/12/img_middle.jpg" alt="理想的图片垂直居中效果图" /></div>