rem弹性布局（微信小程序则化名rpx）

作者: Jure_joe | 来源:发表于2019-08-09 14:26 被阅读0次

rem弹性布局（微信小程序则化名rpx）
微信小程序canvas尺寸设置
rem的作用与运用，小程序为什么用rpx为单位
微信小程序中rpx与rem单位使用
小程序基本布局
微信小程序尺寸单位rpx以及样式相关介绍
微信小程序---弹性布局
uni-app在H5与微信小程序下css不同单位显示对比
px、物理像素、rem、rpx的关系
rpx

简介
1、了解两个相关概念

em:指的是以父节点元素中字体的大小为参考，指定子元素的大小，如：存在一个父节点的字体为24px，则1em = 24px,以此类推，但以该单位作为布局的依据容易造成布局混乱

rem:指的是以根元素的字体为参考，指定子元素的大小。相较于em而言，

 html {
    font-size: 32px
}

同理：1rem= 32px，只是两个单位的参考点不一样
2、采用该种布局方式，可以避免流式布局在较大或较小的分辨率下,造成元素变形严重的现象，该种方式结合相应的媒介查询可以实现不同分辨率下的缩放，效果如下：

20190809_142011.gif

3、html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <title>rem布局</title>
    <link href = "../css/rem.css" rel='stylesheet'>
</head>
<body>
    
    
    <div class="div">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
        <div class="div4"></div>
        <div class="div5"></div>
        <div class="div6"></div>
        <div class="div7"></div>
        <div class="div8"></div>
        <div class="div9"></div>
        <div class="div10"></div>
    </div>
    

    <div class="divcc">
        <div class="cc1"></div>
        <div class="cc2"></div>
        <div class="cc3"></div>
        <div class="cc4"></div>
        <div class="cc5"></div>
        <div class="cc6"></div>
        <div class="cc7"></div>
        <div class="cc8"></div>
        <div class="cc9"></div>
    </div>
    
</body>
</html>

4、css代码

html {
    font-size: 32px; /* 320/10 */
}
body {
    font-size: 16px; /* 修正字体大小 */
    /* 防止页面过宽 */
    margin: auto;
    padding: 0;
    width: 10rem;
    /* 防止页面过宽 */
    
}


@media screen and (min-width: 320px) {
    html {font-size: 32px}
    body {font-size: 16px;}
}
@media screen and (min-width: 481px) and (max-width:640px) {
    html {font-size: 48px}
    body {font-size: 18px;}
}
@media screen and (min-width: 641px) {
    html {font-size: 64px}
    body {font-size: 20px;}
}
@media screen and (min-width: 800px) {
    html {font-size: 80px}
    body {font-size: 22px;}
}



.div,.divcc {
    width:100%;
    height:5rem;
    background-color:#ccc;
    display:float;
}
.divcc{
    display:flex;
}
.div1,.div2,.div3,.div4,.div5,.div6,.div7,.div8,.div9 {
    width:0.555rem;
    height:0.555rem;
    background-color:red;
    float:left;
    
}
.div10{
    clear:both;
    width:0.555rem;
    height:0.555rem;
    background-color:red;
}
.div2,.div4,.div6,.div8 {
    background-color:blue;
}
.divcc{
    margin-top:1rem;
}
.cc1,.cc2,.cc3,.cc4,.cc5,.cc6,.cc7,.cc8,.cc9 {
    height:0.555rem;
    background-color:red;
    flex:1;
    
}
.cc2,.cc4,.cc6,.cc8 {
    background-color:blue;
}