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

林光宇
  • 301

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

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

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

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

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

回复
阅读 5.2k
19 个回答
✓ 已被采纳

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

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

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

通过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;
  }
}

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

你把body换成html试试

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

Lucky_LYZ
  • 4
新手上路,请多包涵

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

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

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

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

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

那么,来看问题

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

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

(^__^)

希望对你有所帮助:

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

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

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

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

监听 onloadresize 事件计算设置 fontSize 的值

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

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';
    }
});
朱小瑞
  • 1
新手上路,请多包涵

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

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

你知道吗?

宣传栏