自适应标题延展线写法

最近做到一个手机页面，要求在标题边上放上两条对称的延展线，想了几个方法都不太理想，于是写了特别的组合，很适合移动端使用，完全自适应

 

 

 

 

 

 

body,html{padding:0; margin:0;}
.main{width:80%; min-height:300px; margin:0 auto; background-color:#666; opacity:0.6;}
.box{width: 100;height: 200px;position: relative;border: 1px solid #000;
    display: -webkit-flex; /* Safari */
    display: flex;
    justify-content: center;
    align-items: center;
}
.box .line{width: 30%;border-bottom: 1px solid #00aced;}
.box .text{padding:0 10px;}

<div class="main">
    <div class="box">
        <span class="line"></span>
     <span class="text">文字文字文字</span>
    <span class="line"></span>
    </div>  
</div>

 

 

让页面随分辨率缩放的mate

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta name="format-detection" content="telephone=no, email=no"/>

延伸阅读

display: flex;display: -webkit-flex; /* Safari */

flex多栏多列布局

当父辈元素设置为display: flex;子元素设置为flex:1;子元素可以自动设置对比宽度并从左至右排列起来。效果比浮动宽度百分比要好用。