rem布局

我们做的h5页面只能在移动端访问(rem不兼容低级版本浏览器)

第一步:从UI设计师拿到设计稿(psd) 640*1136
第二部:在样式中给HTML一个fontSize值,我们一般都给一个比较好算的值,比如:10px 100px...
在这里我们之所有用100px,主要是浏览器最小的字体大小都是12px,用10px比例会存在偏差

 html{
            font-size: 100px;/*1rem=100px*/
        }
第三步:写页面,写样式
完全按照设计尺寸来写样式,不管任何事情,设计稿给你的宽度,高度字体大小、margin、padding的值是多少,我们就写多少
但是我们在写样式的时候,需要把得到的像素值除以100,计算出对应的rem值,我们设定的也都是rem的值
(值得注意点的是外层盒子的宽度我们一般还是不写固定值,沿用流式布局的思想)

第四步:根据当前屏幕的宽度和设计稿的宽度来计算我们的HTML的fontSize的值
设计稿:640 fontSize=100
手机:320 fontSize=50
手机:375 fontSize=58.59375

//    根据当前屏幕的宽度和设计稿宽度的比例,动态计算一下宽度下fontSize值应该是多少,如果fontSize值改变了,之前的rem会自动跟着放大或缩小
    ~function () {
        var desW=640,
                winW=document.documentElement.clientWidth,
                n=winW/desW;
         document.documentElement.style.fontSize=n*100+'px';
    }();
jd移动布局
~function () {
        var desW=640,
                winW=document.documentElement.clientWidth,
                n=winW/desW;
        var con=document.getElementById('con');
        if(winW>desW){
            con.style.width=desW+'px';
            con.style.margin='0 auto';
            return;
        }
        document.documentElement.style.fontSize=n*100+'px';
    }();

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值