移动端的rem是必须和媒体查询配合使用嘛?不同分辩率利用媒体查询来设置字体大小,我看有的帖子用了,有的帖子没用。谢谢!
不是必须的。可以给根节点设置字体大小:
html {
font-size: 10vw;
}
根节点字体大小是屏幕宽度的 1/10 ,然后使用 rem。
ps:根节点字体大小到底设置多少个 vw。。。看个人习惯吧。。。
楼主,我也刚开始研究这方面,你可以看看这文章,看明白就知道怎么回事了!
移动端高清、多屏适配方案
从网易与淘宝的font-size思考前端设计稿与工作流
首先,没有什么必须的方案,只有最适合的。
不过rem+媒体流查询算是一个比较成熟的方案,我们在动态计算html的fant-szie CSS采用rem大部分的适配连媒体流都可以不使用。
你可以参考一下淘宝的解决方案。
现在比较成熟的解决方案一种是网易的那种,或者淘宝的。
(转载)这是我在另一个问题下发的答案,希望有所帮助,手机转载不便见谅
【设计稿上的px,落实到前端开发的话,字体大小该设多少?】如果一张设计稿是640x1136,设计稿里的字体大小分别是18px,24px,33px。那么落实到前端写代码的时候,应该用多少px呢?如果用18px,24px,33px的话,在手机上看,会显得很大额。 -- 分享自SegmentFault 原文链接:https://.com/q/10...
看起来是 iPhone 5 的分辨率,那么需要一次逻辑分辨率的转换。
iPhone 5 的逻辑分辨率为 320 X 568,所以如果需要像素级还原,需要将设计的设计稿缩放为 320 X 568,然后再按照缩放后的尺寸进行开发,可以直接写像素尺寸。
如果不想在样式表中用像素的话,比如用 rem,那么只需要在样式表预处理语言中定义一个 $rootFontSize,然后将 $rootFontSize 设置在 html 标签上,之后所有的尺寸都可以使用 (逻辑分辨率设计稿上的尺寸 / $rootFontSize)rem,一般通过定义一个函数进行,比如:
$rootFontSize = 12px
size(px)
(px / $rootFontSize)rem
html
font-size: $rootFontSize
.something-is-200px-in-design
width: size(200px)
先用js动态计算字体
<script type="text/javascript">
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = (clientWidth >= 640 ? 100 : clientWidth / 6.4) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
然后使用rem单位