用rem进行布局。 为什么效果不生效呢

Question

我在html里面设置font-size为100px 1rem =100px

写出来的页面。 在chrome上调试 更换设备查看的 字体或者布局没有进行缩放 。

字体没有放大或者缩小 别的布局尺寸也一样

怎么让设备的不同。 进行缩放呢？

在这个页面里面应该引入什么？

Answer 1

1.rem的设置是根据html节点的font-size的。不是body
2.rem的值，应该是根据屏幕大小而有所改变的，你如果仅仅这样写的话，没有什么实际意义！
3.关于rem的设置和原理，我之前回答过了。在下面这个问题，找到我的回答，我回答得很详细，很容易懂的，不懂再问我吧。
移动端适配问题

Answer 2

rem是根据html元素的font-size属性计算的，不是body

Answer 3

html标签的font-size=100px一直没变，你得用js根据页面宽度计算

Answer 4

通过js改变html字体大小，这个时候再使用rem根据html元素的font-size属性

js文件
var App = function () {
        /*
         *根据屏幕大小 改变字体大小
         */
        var fontSizerecalc = function () {
            var docEl = document.documentElement,
                // 手机旋转事件,大部分手机浏览器都支持 onorientationchange 如果不支持，可以使用原始的 resize
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    //clientWidth: 获取对象可见内容的宽度，不包括滚动条，不包括边框
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    docEl.style.fontSize = 12 * (clientWidth / 320) + 'px';
                };
    
            recalc();
            //判断是否支持监听事件 ，不支持则停止
            if (!document.addEventListener) return;
            //注册翻转事件
            window.addEventListener(resizeEvt, recalc, false);
        };
    
        return {
            init: function (options) {
                fontSizerecalc();
            }
        }
    }();
    Zepto(function ($) {
        App.init();
    });

另外一种方法是通过css媒体查询设置html font-size

@media only screen and (min-width: 340px){
  html {
    font-size: 20px !important;
  }
}
@media only screen and (min-width: 401px){
  html {
    font-size: 25px !important;
  }
}
@media only screen and (min-width: 428px){
  html {
    font-size: 26.75px !important;
  }
}
@media only screen and (min-width: 481px){
  html {
    font-size: 30px !important;
  }
}
@media only screen and (min-width: 569px){
  html {
    font-size: 35px !important;
  }
}
@media only screen and (min-width: 641px){
  html {
    font-size: 40px !important;
  }
}

Answer 5

当然得需要引入js喽 或者引入手淘flexible.js 想看的话百度一下rem一大堆

Answer 6

你把body换成html试试

Answer 7

https://github.com/flashlizi/...

Answer 8

将font-size设置成百分比，才能根据屏幕大小进行变动

Answer 9

rem的使用，首先需要你确定某一种类型的设备屏幕，然后以此设备为基准，动态的换算其他设备上font-size的值。
如下图：
][1]

Answer 10

使用media query 可以根据屏幕大小改变你html节点的字体大小 然后使用rem的相应字体大小也会跟着改变

Answer 11

1. 用media width 控制 html 的 font-size
2. 用js动态计算并生成 html 的font-size

rem 是 root em 的意思,所以你不改变 html 的字体大小 rem 对应的 px 大小当然不会变化的!

Answer 12

首先，rem是根据根元素的font-size的大小来进行，这里的根元素指的就是html标签。

那么，来看问题

你的问题是想让字体随着设备大小进行缩放，那么也就是html的font-size随着设备大小进行缩放。so...这里面就需要js来进行设备宽度的查询啦。

你可以看看淘宝的flexible.js方案，很不错。

(^__^)

Answer 13

希望对你有所帮助：

假如所有屏幕跨度都设置为7.5rem
//设置自适应字体大小,所有屏幕宽度都设置为7.5rem
var docEl = document.documentElement;
var clientWidth = docEl.clientWidth;
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';

在模拟器上模拟切换设备时，要重新刷新页面才能显示效果

Answer 14

谢邀，大家说的很全了，这样的响应式布局，移动端一般而言分两步；

1. 确定基准，选取基准值，一般是375px的设计稿，所有的按照这个磁尺寸设计，html的font-size 100px
2. 然后自适应使用js计算，根据屏幕的宽度，比如现在屏幕是420px宽，那么font-size就应该是 420*100/375;也就是font-size和屏幕宽的比例是固定的，这样才会有响应式的效果。

Answer 15

监听 onload 和 resize 事件计算设置 fontSize 的值

Answer 16

建议参考一下移动端布局的文章，使用rem配合css属性@media和动态修改meta标签进行实现

Answer 17

html的fnot-size要根据屏幕大小设置），使用rem才会等比缩放（你设置成100px固定当然不生效）；
或者设置为font-size:13.33vw;13.33%的屏幕宽度，750设计稿的100px;或者js设置，使用rem就好了
$(function(){

    initpage();
    $(window).resize(function()
    {
        initpage();
    })
    function initpage()
    {
        var view_width = document.getElementsByTagName('html')[0].getBoundingClientRect().width;
        var _html = document.getElementsByTagName('html')[0];
        _html.style.fontSize =view_width*10/75+'px';
    }
});

Answer 18

你要先获取屏幕大小，然后让字体大小随着屏幕大小改变

Answer 19

对于这种问题，你应该先去mdn，w3c查rem的使用文档，查询无果再问。