首页 > 移动端的rem是必须和媒体查询配合使用嘛?

移动端的rem是必须和媒体查询配合使用嘛?

移动端的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单位

【热门文章】
【热门文章】