Repository navigation
rem自适应方案 #3
Description
H5自适应改造方案——rem方案
原理
之前我们H5页面使用的方案是设置viewport meta头，让浏览器帮我们把页面缩放，使得页面看起来好像是自适应。实际上这不是自适应，只是在中小屏设备上，看起来差距不大，问题不明显而已。
现在大屏高清设备流行，自适应的问题也越来越明显了。在大屏设备上，课程封面小，title被拉长，文字小，按钮扁等问题越来越突出，已经达到不能忍受的程度，因此需要一套自适应的方案。
页面缩放
在viewport meta头里，取消让浏览器自动缩放页面，页面的自适应由页面自身管理。
因为有dpr的问题，为了统一管理，让浏览器帮我们根据dpr缩小页面，比如dpr=2，就缩小0.5让页面统一处在dpr=1的环境中。
rem
rem是一个半相对单位，它相对的是html(或body)元素的font-size值，例如有html { font-size: 10px; }，则1rem = 10px。
当html元素的font-size是根据设备宽度自适应时，使用rem的页面也就会有自适应的特性。
文字
根据以下两个原因，对于文字使用px：
- 在大屏设备希望看到更多的文字
- 中文点阵最好是在12px，14px，16px这种尺寸，使用rem就会无法避免使用13px，15px尺寸，这样文字会显示的很奇怪
没有浏览器帮助我们缩放页面，在高清设备里面需要我们手动对文字进行缩放，为了方便这个而不需要写media query，页面在计算html的font-size值的同时，会设置一个data-dpr的属性。这时文字的media query就可以这样写：
p { font-size: 12px; } /* dpr = 1 */
[data-dpr="2"] p { font-size: 24px; } /* dpr = 2 */
[data-dpr="3"] p { font-size: 36px; } /* dpr = 3 */规范
-
在head头引入初始化js脚本，可以使用两种代码：
- 淘宝移动端自适应方案开源代码，注：这里的因子是10，即font-size = W/10
- 腾讯课堂公众号最新代码里面（路径：src/inline/rem.html），里面的代码是淘宝现网代码copy下来的，与开源代码对比过，大致一样。注：这里的因子是16，即font-size = W/16
-
开发时，假如视觉稿宽度是640，则最好使用第二种方案，选择16作为因子，则比例为640/16=40。那么，页面所有的rem数值的换算公式为：在视觉稿中的px数值/40。
以后会开发一个fis插件，在开发时只需填入视觉稿中的px数值，由fis插件帮助我们自动换算，在插件开发出来之前，先人工计算吧。
-
文字使用px单位，同时需要写media query，借助html元素上面的data-dpr属性，详见原理部分。
Activity
miniflycn commentedon Apr 27, 2015
good job，解决了我周四的问题
longyiyiyu commentedon May 5, 2015
实践所得——重构公众号首页
由前面的【原理】可知，非自适应的页面通过浏览器的缩放在不同手机之间的显示差不多，关键只在于这些差异能不能容忍，如果可以容忍，那么完全可以不用自适应方案。
稀疏布局不像列表结构，页面元素不多。其中某些元素需要宽度自适应（否则太窄），这时高度也必须跟着自适应（否则太扁），那么里面的字体也必须跟着自适应（否则太空旷，除非多几行）
font-size小于12px的字体在3倍屏下面会显得很小
一个640px宽的屏幕，它可能是6401，也可能是3202，不管是哪一种，页面的布局（使用rem单位）长得都是一样的，那字体要怎么度量？这个问题放在以前就是一个@Medie的事情，但是现在不想这样做，希望通过[data-dpr="xx"]来实现，只有2个临界点，那么问题是，你怎么知道640的页面是1dpr还是2dpr？这个只能通过普遍机型的经验来确定，一般640，750都是2dpr的，因此对于640的稿子量出来的字体大小是属于data-dpr="2"的。
如果我们的页面需要适应pad，那么有两个方案，一个是定宽；另一个就是在html元素上面再加上一个data-device了，因为640*1会在pad中出现。
相比较而已，还是支持icofont方案，原因如下：
litten commentedon May 5, 2015
good！很好的分享实践
ousiri commentedon Jun 9, 2015
为什么font-size和border不需要设置rem?
herbertliu commentedon Jun 16, 2015
@ousiri 这里主要是考虑后续我们希望能够直接通过工具生成rem或者font-size。
xrds commentedon Jul 8, 2015
为什么咋 安卓上 布局会变大阿 怎么解决阿
herbertliu commentedon Jul 10, 2015
@xrds 具体指哪里？详细描述下场景，展示和屏幕尺寸有关。
xrds commentedon Jul 14, 2015
@herbertliu dpr的问题 第一次用不太了解。。。 谢谢
herbertliu commentedon Jul 20, 2015
@xrds dpr本身是表示显示像素和物理像素的比。一般我们用的是2倍像素，这里借助data-dpr设置，来手动管理手机分辨率（再去掉了meta viewport二倍像素设置后）。根据这个data-dpr的设置，可以在css中设置对应的想要设置的值，如：
xrds commentedon Jul 20, 2015
@herbertliu 谢谢,河伯详细讲解 我现在已经有了大概的了解了。。。
luckymore commentedon Sep 10, 2015
好腻害，，，这能写个插件刁刁哒
qc-zhan commentedon Sep 10, 2015
background-position用rem定位雪碧图的话会出现偏差，请问你们是怎么处理了，是用px加dpr？
herbertliu commentedon Sep 11, 2015
@luckymore 插件我们看看尽快能否输出
luckymore commentedon Sep 11, 2015
@herbertliu 划擦O(∩_∩)O，，，河伯大爱无疆，期待
luckymore commentedon Sep 11, 2015
@qc-zhan 图片大小不是确定的么。。。为啥不用px定位，rem控制大小background-size。
-----我是一枚小菜鸟，萌的不要不要的
9 remaining items
luckymore commentedon Oct 26, 2015
1080*1920
请问我怎么判断。。我这图属于什么范围内？html [font-size] 应该是多少？
谢谢！
herbertliu commentedon Oct 26, 2015
@luckymore font-size是根据你自己的页面来，没有固定的值。一般按经验来算，采用1rem=10px（即html [font-size]为10px），比较好计算，宽度为：1080/10=108rem。不过这样一来，每个rem数字较大，这时采用1rem=40px（即html [font-size]为40px）。那么宽度为：1080/40=27rem，也是OK的。
luckymore commentedon Oct 26, 2015
@herbertliu
河伯，我没表达清楚。。。
html的**[font-size]**是js根据手机的大小决定的，比如说iPhone6 375 × 627，js计算出来的值是这样的：
现在我不理解的是，我从拿到一个1080 × 1920设计稿开始，为它选择一个font-size基 ‘ s’ 来计算：
设计稿里有个300 × 100 的按钮，则：
这其中的**’s‘**值是怎么确定的。。。有点白痴的问题呢😄
herbertliu commentedon Oct 26, 2015
@luckymore 你说的是用那个js设置吧。首先根据iPhone6 375 × 627，
dpr为2，然后页面实际像素宽度
这里采用的dpr倍数是：10，所以宽度为计算出来的宽度是75px
那么，实际开发中。从上面的分析可以看到，倍数是10，,针对1080 × 1920。1080->750(iphone6为例)->10rem；所以这里1rem=108px(这里指的是视觉稿1rem对应的108px)。因此针对，300 × 100的按钮。对应的rem为300/108=2.78rem。
另外，我们采用的是倍数是16，即：1rem=46.875px(iphone6为例)，视觉稿中：1rem=67.5px。
luckymore commentedon Oct 27, 2015
@herbertliu
小弟比较愚钝，，还请河伯不要烦我。。ronyland commentedon Nov 6, 2015
说得很好
majiang666 commentedon Mar 18, 2016
已经解决，应用这个js头部的它是需要去掉的，js会自动添加
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">demo：http://www.love85g.com/code/
p { font-size: 12px; } /* dpr = 1 */
下边两句为什么在我测试页面不起作用，求解
[data-dpr="2"] p { font-size: 24px; } /* dpr = 2 /
[data-dpr="3"] p { font-size: 36px; } / dpr = 3 */
herbertliu commentedon Mar 23, 2016
@majiang666 效果是什么样子？有测试路径吗？
majiang666 commentedon Mar 30, 2016
@herbertliu demo：http://www.love85g.com/code/
git-lt commentedon May 7, 2016
开发时，假如视觉稿宽度是640，则最好使用第二种方案，选择16作为因子，则比例为640/16=40。那么，页面所有的rem数值的换算公式为：在视觉稿中的px数值/40
这里为什么要使用16做为因子? 如果是640下设计稿，根字体计算出来为100，这样不是更好计算rem的大小吗？
herbertliu commentedon May 9, 2016
@git-lt 其实这里的用多少没关系的，而且计算这个可以通过插件来直接支持，开发仍然只需关注px，查看fis-parser-rem。
suming1016 commentedon May 19, 2016
html 后面那个font-size可以动态取值的；
图片自适应怎么办？根据dpr设计不同的图吗，有没有什么好方法（）
suming1016 commentedon May 19, 2016
@herbertliu 链接打不开404
herbertliu commentedon May 20, 2016
@suming1016 OK了
cola-sk commentedon Jan 5, 2018
没看到border怎么适配啊