HTML入门09

文章目录

rem

rem 是指根元素(root element)的字体大小。根元素就是我们所说的html元素,默认的情况下,根元素字体的字体大小是16px;
那我们做移动端的响应式开发,如果纯粹用之前所说的媒体查询,那么我们的代码就会很多,写起来也不是很方便。那么怎么办呢? 我们就可以结合我们的rem。
rem做移动端的思想? 当我们拿到设计稿的时候,如果可以按照设计稿的尺寸去写,然后通过更改一个值,就能更改页面中所写的css,那是不是会很方便,rem刚好就是。 1rem=html的字体大小(默认情况下是16px);
如果我们随着移动端屏幕的改变,然后改变下html的字体大小,就可以达到刚才的目的。
屏幕的宽度/设计稿的尺寸=x/100; 根据这个计算公式我们是不是可以算出移动端屏幕改变时候的根元素应该具有的字体大小。

 <script>
        (function () {
            function computed() {
                // 获取屏幕的宽度
                var win = document.documentElement.clientWidth || document.body.clientWidth;
                // 设计稿的尺寸
                var des = 640;
                // 如果屏幕的宽度>=设计稿的尺寸,我们
                if (win >= des) {
                    document.documentElement.style.fontSize ="100px";
                    return;
                }
                //设置根元素的字体大小
                document.documentElement.style.fontSize = win / des * 100 + "px";
            }
            computed();
            window.onresize=function(){
              computed();
            }

        })();
    </script>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值