如何用快捷调整 css 使得网页变得更加“大”?

2013-05-30 00:31:11 +08:00
 yangzh
我使用 jekyll, 见到 http://muan.co/ 的,很漂亮,我想用在自己网站上,那个主题是开源的。

但是我觉得那个网站整体的字体太小了,想把网站改得更加“大”,具体来说,(win linux)chrome 中按住 ctrl 键鼠标中键滚动,把网站放大到 150% 倍,就是我想要的效果。

有什么办法快速的调整其 css 的各项目使之达到我目标?

网站的源代码是 https://github.com/muan/muan.github.com ,目测有一大坨 sass coffee 的文件,也有编译好的。
作者把主题整理出来,https://github.com/muan/scribble ,都是编译好的 js css 文件。

请各位大神指点,本人平时是搞后端的,前端的除了 bootstrap 外基本上不会呃。

哦还有,那个网站在手机( iPhone android)上应该是 responsive 的,也许这也是要注意的地方。
1981 次点击
所在节点    问与答
8 条回复
qiayue
2013-05-30 00:34:38 +08:00
https://github.com/muan/scribble/blob/master/stylesheets/style.css
第 12 行
font-size: 13px;
修改 13 这个数值即可,这是字体大小,边调整边看效果,知道你满意为止
qiayue
2013-05-30 00:36:53 +08:00
同一个文件的 13 行
line-height: 19px;
这是指定行间距的,最好相应的也改一下,一般来讲 1.5 倍~ 2 倍的行间距会比较好看

你看,之前的字体大小 13 * 1.5 = 19.5 ,他这里取的是 19 ,差不多就是 1.5 倍
clowwindy
2013-05-30 00:39:19 +08:00
html { zoom: 1.5; }
yangzh
2013-05-30 00:41:11 +08:00
@qiayue 问题是不止字体的,页面宽度什么的也要一起调。

@clowwindy 牛逼大发了!我试一下!
yangzh
2013-05-30 00:52:38 +08:00
@clowwindy 目测成功,虽然很不理解它怎样起作用的。我把这语句放到所有 css 的前面,或者所有 css 的后面,都可以达到目标。
yangzh
2013-07-10 16:53:39 +08:00
@clowwindy 很不幸,原来这个是在 firefox 里面行不通的,且没有简单的替代品。
clowwindy
2013-07-10 17:09:02 +08:00
可以加上 -moz-transform: scale(2);
yangzh
2013-07-10 18:18:51 +08:00
@clowwindy 试过了。不完美的。会出现错位,浮动元素不正确等问题。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/70582

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX