移動端像素border的實現

標籤：地址   text   top   lin   display   imp   分享圖片   span   cti   

知識點一、如何在手機上看我們製作的移動端頁面。

　　正常我們在電腦上都是按如來製作手機頁面的：

　　

　　如果要在手機上面看就不能用localhost了。所以，進入命令列，輸入ipconfig查看本地ip地址：

　　

　　然後返回本地頁面，把localhost替換成這個地址。然後把整體輸入在手機上，就能看到頁面在手機上的樣子了。

　　接下來製作我們的像素border。

　　第一步：

　　mixin.less

 代碼：

.border-1px(@color){    position:relative;    &:after{        display:block;        position:absolute;        left:0;        bottom:0;        width:100%;        border-top:1px solid @color;        content:‘‘;    }}

第二步：app.vue使用：

代碼：

<style lang="less">@import ‘common/style/mixin‘;      <!---------------------這裡是匯入#aaa    .tab{        display:flex;        width:100%;        height:40px;        line-height:40px;        .border-1px(rgba(7,17,27,0.1));         <!---------------------這裡是使用        .tab-item{            flex:1;            text-align: center;            a{                display:block;                font-size:14px;                color:#ccc;                &.active {                    color:rgb(240,20,20);                }            }        }    }</style>

 

　　

移動端像素border的實現