您的位置：首页 > Web前端 > React

React的Web端自适应布局（rem+flex）

2018-03-27 14:44 736 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航