web采用 rem 和页面 scale 缩放方案，具体如何实践？

[fddi]

版本0.8.0
使用默认组件样式时尺寸过大，如何整体优化？
0.8.0版本更新：官方网站展示优化，demo 分类优化，web demo 采用 rem 和页面 scale 缩放方案，达到页面高清效果；具体如何实践？

[minooo]

更新到0.8之后，确实是过大！

[silentcloud]

@liqi07 出一个高清方案的最佳实践，直接在 @yiminghe 写的那个脚手架里弄

[liqi07]

@fddi @minooo 先参考一下项目demo展示页面http://mobile.ant.design/kitchen-sink/ 的做法：

ant-design-mobile/site/mobile/static/template.html

Line 6 in 8b07774

<script>!function(e){function t(a){if(i[a])return i[a].exports;var n=i[a]={exports:{},id:a,loaded:!1};return e[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=window;t["default"]=i.flex=function(e,t){var a=e||100,n=t||1,r=i.document,o=navigator.userAgent,d=o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),l=o.match(/U3\/((\d+|\.){5,})/i),c=l&&parseInt(l[1].split(".").join(""),10)>=80,p=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),s=i.devicePixelRatio||1;p||d&&d[1]>534||c||(s=1);var u=1/s,m=r.querySelector('meta[name="viewport"]');m||(m=r.createElement("meta"),m.setAttribute("name","viewport"),r.head.appendChild(m)),m.setAttribute("content","width=device-width,user-scalable=no,initial-scale="+u+",maximum-scale="+u+",minimum-scale="+u),r.documentElement.style.fontSize=a/2*s*n+"px"},e.exports=t["default"]}]);

后面脚手架会做相应更新

[pingan1927]

https://github.com/ant-design/ant-design-mobile/wiki/antd-mobile-0.8%E9%AB%98%E6%B8%85%E6%96%B9%E6%A1%88%E5%AE%9E%E8%B7%B5

[minooo]

@liqi07 谢谢,demo我看加了个这个
<meta name="viewport" content="width=device-width,user-scalable=no,initialscale=0.3333333333333333,maximum-scale=0.3333333333333333,minimumscale=0.3333333333333333">
我比葫芦画瓢加了上去，结果，按钮恢复正常大小了，但是我写的样式就,,,,

@pingan1927 这个高清方案脚本貌似是黑科技，有使用指南么，比如我们的设计图要多大，才能正好缩放到你们演示的那种效果呢

[silentcloud]

@minooo 一般以 iPhone6 的大小来，即宽度 750

[afc163]

需要补充到 changelog 中。

[Coohack]

html {
font-size: 50px;
}

body {
font-size: .28rem;
}
设置之后ant的字体还是px单位，这个怎么办，

[Coohack]

应该把这个链接放到changelog里面啊，给我找好久

[zhaotoday]

我的临时解决方案，可以参考下：
https://github.com/zhaotoday/react-antd-mobile/blob/master/src/template/index.html

<meta name="viewport" content="width=device-width,user-scalable=no,initialscale=0.5,maximum-scale=0.5,minimumscale=0.5">
<link rel="stylesheet" href="http://mobile.ant.design/kitchen-sink.css">

设置默认字体：
https://github.com/zhaotoday/react-antd-mobile/blob/master/src/themes/default/global/reset.scss#L2
官方估计会在下一个版本做处理。

[liqi07]

#56 项目示例已支持0.8.x

[crazyair]

@zhaotoday 改了 就是不知道什么时候修复这个问题