移动 Web 页面字体设置

0

先给答案,后面再解释。

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也都有用到。

searchlist_demo

最近刚好对360搜索的图片搜索结果页进行了一次重构和改版,对于这种图片布局也花心思研究了一番,接下来说说我的一些处理思路。

非等宽的单个图片要排列到一个固定了宽度的容器中,那么这个等宽的容器就是最大的限制和障碍,开始怀念那种常见等宽瀑布流的布局(没有限制真好)。

先理下基本的需求:

  • 1、图片的宽度是不固定的;
  • 2、图片的高度是固定的;
  • 3、每行图片的总宽度是固定的,所以每行能容纳的图片的数量是无法确定的;
  • 4、确保图片质量不变,不能有拉伸变形导致图片失真的情况出现;
  • 5、图片之间的间距是固定的;
阅读全文 »

一淘九宫格的面试题

来自一淘的 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>

阅读全文 »