Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

有两个疑问,求大神解答,为啥要分成10a,1rem=75有啥用,还有为啥把安卓置成dpr1,安卓那么多2和3的 #47

Closed
rpig opened this issue Apr 26, 2016 · 7 comments

Comments

@rpig
Copy link

rpig commented Apr 26, 2016

有两个疑问,求大神解答,为啥要分成10a,1rem=75有啥用,还有为啥把安卓置成dpr1,安卓那么多2和3的

@rpig rpig changed the title 有两个疑问,求大神解答,为啥要分成10a,1rem=75培训有啥用,还有为啥把安卓置成dpr1,安卓那么多2和3的 有两个疑问,求大神解答,为啥要分成10a,1rem=75有啥用,还有为啥把安卓置成dpr1,安卓那么多2和3的 Apr 26, 2016
@iceshu
Copy link

iceshu commented May 19, 2016

淘宝的做法是只管iOS,安卓一律把dpr设为1,官方的说法是安卓的厂商会自己修改dpr,导致安卓上的 window. devicePixelRatio 是假的。

@iceshu
Copy link

iceshu commented May 19, 2016

如果分成一百分 一份为a 1rem为7.5a 那么ip6 布局视口是750 1rem为7.5 60px转换就是8rem 600px转换就是80rem 我觉得没啥 就是自己这样定义而已

@hbrls
Copy link

hbrls commented May 20, 2016

我的理解就是保持比例缩放,大屏幕看到的更大,小屏幕看到的更小

@rpig
Copy link
Author

rpig commented May 24, 2016

@iceshu 那安卓为啥默认不设成2

@jasonChen1982
Copy link

其实感觉分成10分这个概念没那么必要。说白了rem只是一个比例中转的作用,当打开页面时js根据此时屏幕的尺寸动态算出当前屏幕的与设计稿之间的比值,然后将比值作用到根font-size上,这样页面里的所有rem单位的内容就随之放大或缩小。

@airen
Copy link
Contributor

airen commented May 25, 2016

简单的做一下回答。

这个方案是根据vw的单位原理为基础理论。根据vw的单位原理,整个viewport是100vw,那么1a就等于1vw。假设我们的设计图是750px的宽度,那么1a就是7.5px。同时为了让font-size更适合阅读,就考虑在此基础上放大10倍,即10a=100vw,如此10a=75px。这样就把整个设计分成了10等份,每一等份就是75px,同时将html的font-size设成75px。然后根据不同的dpr来修改html元素的font-size值。

第二个问题,由于早期安卓的dpr属性不标准,所以强制设置为1。根据现在的技术成熟角度而言,可以考虑给安卓提供一份白名单。后期会根据这个给安卓做一些处理。

不知道这样的解释是否能帮您。

@rpig
Copy link
Author

rpig commented May 27, 2016

@airen 谢大神

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants