React的Web端自适应布局(rem+flex)

本文介绍了在React项目中实现Web端自适应布局的方法,主要利用rem单位和flex布局。针对React不支持百分比布局的问题,作者通过设置不同屏幕尺寸下的字体大小实现rem布局,并提供了相关js换算算法,结合CSS flex布局,实现了三段式布局的自适应效果。示例代码显示了在iPhone5、iPhone6和iPhone6 Plus上的展示效果。

React的Web端自适应布局(rem+flex)

搭好react项目后开始画页面的时候才发现react不支持百分比布局,mmp!
后来经过一系列的调查后,决定使用rem自适应布局,

rem(font size of the root element)是指相对于根元素的字体大小的单位。

原理
通过js代码换算出各个屏幕的字体大小,然后1rem会等于换算出的字体大小,从而达到自适应的目的

用法
js中引入换算算法

!(function(doc, win) {
    var docEle = doc.documentElement,
        evt = "onorientationchange" in window ? "orientationchange" : "resize",
        fn = function() {
            var width = docEle.clientWidth;
            width && (docEle.style.fontSize = 20 * (width / 320) + "px");
        };

    win.addEventListener(evt, fn, false);
    doc.addEventListener("DOMContentLoaded", fn, false);

H5上添加mata标签

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

flex就不用说了,我直接贴我整理的css代码

.rowCenter{
display:flex;flex-direction:row;justify-content:center;
align-items:center;
}
.rowCenterStart{
display:flex;flex-direction:row;justify-content:center;
align-items:flex-start;
}
.rowSpaceAround{
display:flex;flex-direction:row;justify-content:space-around;
align-items:center;
}
.rowAroundAround{
display:flex;flex-direction:row;justify-content:space-around;
 align-items:baseline;
}
 .rowStart{
display:flex;flex-direction:row;justify-content:flex-start;
align-items:center;
}
.rowStartWrap{
display:flex;flex-direction:row;justify-content:flex-start;
align-items:center;flex-wrap: wrap;
}
.rowFlexEnd{
display:flex;flex-direction:row;justify-content:flex-end;
align-items:center;
}
.rowFlexStartEnd{
display:flex;flex-direction:row;justify-content:flex-start;
align-items: flex-end;
}
.rowSpaceBetween{
display:flex;flex-direction:row;justify-content: space-between ;
align-items:center;
}
.columnCenter{
display:flex;flex-direction:column;justify-content:center;
align-items:center;
}
.columnStartStart{
display:flex;flex-direction:column;justify-content:flex-start;
align-items:flex-start;
}
.columnStartCenter{
display:flex;flex-direction:column;justify-content:flex-start;
align-items:center;
}
.columnCenterStart{
display:flex;flex-direction:column;justify-content:center;
align-items:flex-start;
}
.columnCenterAround{
display:flex;flex-direction:column;justify-content:center;
align-items:space-around;
}
.columnEnd{
display:flex;flex-direction:column;justify-content:flex-end;
align-items:center;
}
.columnEndStart{
display:flex;flex-direction:column;justify-content:flex-end;
align-items:flex-start;
}
.columnSpaceAround{
display:flex;flex-direction:column;justify-content:space-around;
align-items:center;
}
.columnSpaceStart{
display:flex;flex-direction:column;justify-content:space-around;
align-items:flex-start;
}

效果
拿最经典的三段式布局来试验
react代码:

function Head(){
    return (
        <div className={style.headStyle}></div>
    )
}
function Body(){
    return (
        <div className={style.bodyStyle}></div>
    )
}

function Bottom(){
    return (
        <div className={style.bottomStyle}></div>
    )
}

function Content(){
    return (
        <div className={universal.columnCenter}>
        <Head></Head>
        <Body></Body>
        <Bottom></Bottom>
            </div>
    )
}

ReactDOM.render(<Content />, document.getElementById('app'))

iphone5
这里写图片描述

iphone6
这里写图片描述

iphone6puls
这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值