博客
关于我
在线教育app移动端页面rem布局项目
阅读量:488 次
发布时间:2019-03-06

本文共 5944 字,大约阅读时间需要 19 分钟。

移动端页面rem布局项目


页面效果

在这里插入图片描述

设计稿psd文件

在这里插入图片描述

核心代码

html部分

APP设计
WEB设计
ICON设计
其他设计
名师精品课
查看全部>
公开体验课
课程方向
APP设计
WEB设计
ICON设计
首页
学习
课程
我的

less部分

* {    margin: 0;    padding: 0;}body {    margin: 0 auto;    font-family: -apple-system, Helvetica, sans-serif;    color: #666;    background-color: #F6F6F6;    box-sizing: border-box;    padding-bottom: 200rem/54;}header {    width: 1080rem /54;    height: 370rem /54;    padding: 0 40rem /54;    margin: 0 auto;    box-sizing: border-box;    background: url(../images/椭圆2.png) no-repeat;    background-size: 100% 100%;    overflow: hidden;    .search-box {        width: 100%;        height: 100rem /54;        margin-top: 70rem/54;        line-height: 100rem /54;        position: relative;        .search {            margin-right: 140rem/54;            height: 100rem /54;            background-color: #83a6ff;            border-radius: 50px;            padding-left: 75rem /54;            img {                width: 50rem /54;                height: 50rem /54;                vertical-align: middle;            }            span {                font-size: 45rem /54;                color: rgb(232, 232,232);            }        }        .search-right {            position: absolute;            right: 0px;            top: 10rem /54;            img {                width: 60rem /54;                height: 66rem /54;            }        }    }}.banner {    width: 1000rem /54;    height: 430rem /54;    margin: -180rem /54 auto;    img {        width: 1000rem /54;        height: 430rem /54;    }}.diannav{    width: 1080rem /54;    display: flex;    justify-content: center;    position: absolute;    left: -50%;    margin-left: 540rem /54;    top: -30rem /54;    div{        width: 16rem /54;        height: 16rem /54;        border-radius: 8rem /54;        margin: 0 20rem /54;        background-color: #999;    }    .dianing{        background-color: #5887ff;    }}.list {    width: 1080rem /54;    height: 220rem /54;    margin: 0 auto;    margin-top: 230rem /54;    display: flex;    justify-content: space-around;    align-items: center;    text-align: center;    font-size: 37rem /54;    position: relative;    img {        width: 132rem /54;    }}.fine {    width: 1000rem /54;    height: 60rem /54;    margin: 0 auto;    margin-top: 50rem /54;    line-height: 60rem /54;    box-sizing: border-box;    .fine-left {        float: left;        font-size: 42rem /54;        overflow: hidden;        font-weight: 900;        span {            display: inline-block;            width: 10rem /54;            height: 50rem /54;            background-color: #5887ff;            position: relative;            top: 10rem/54;        }    }    .fine-right {        float: right;        font-size: 30rem /54;    }}.fine-bottom {    width: 1000rem/54;    height: 290rem /54;    margin: 0 auto;    margin-top: 30rem /54;    display: flex;    justify-content: flex-start;    div img {        height: 280rem /54;     }    .fbleft img{        margin-right: 30rem /54;    }}.epic {    width: 1000rem /54;    height: 60rem /54;    margin: 0 auto;    margin-top: 50rem /54;    line-height: 60rem /54;    box-sizing: border-box;    .epic-left {        float: left;        font-weight: 900;        font-size: 42rem /54;        span {            display: inline-block;            width: 10rem /54;            height: 50rem /54;            background-color: #5887ff;            position: relative;            top: 10rem/54;        }    }}.epic-bottom {    width: 1000rem /54;    height: 60rem /54;    margin: 10rem/54 auto;    font-size: 34rem /54;    display: flex;    justify-content: flex-start;    align-items: center;    box-sizing: border-box;    div {        margin-right: 50rem /54;    }}.epic-img {    width: 1000rem /54;    height: 210rem /54;    margin: 0 auto;    margin-top: 30rem /54;    display: flex;    justify-content: space-between;    img {        width: 480rem /54;    }}footer {    width: 1080rem /54;    height: 130rem /54;    position: fixed;    background-color: #fff;    right: 0;    left: 0;    bottom: 0;    z-index: 99;    margin: 0 auto;    display: flex;    justify-content: space-around;    align-items: center;    font-size: 28rem /54;    img {        width: 60rem /54;        height: 60rem /54;    }}

js部分

set_fontsize()        function set_fontsize() {            let htm = document.documentElement            let view_width = htm.clientWidth            if (view_width >= 320 && view_width <= 1080) {                htm.style.fontSize = view_width / 20 + 'px'            } else {                htm.style.fontSize = 54 + 'px'            }        }        window.addEventListener('resize', function () {            set_fontsize()        })

源码下载

转载地址:http://hhpdz.baihongyu.com/

你可能感兴趣的文章
MySQL事务原理以及MVCC详解
查看>>
MySQL事务及其特性与锁机制
查看>>
mysql事务理解
查看>>
MySQL事务详解结合MVCC机制的理解
查看>>
MySQL事务隔离级别:读未提交、读已提交、可重复读和串行
查看>>
MySQL事务隔离级别:读未提交、读已提交、可重复读和串行
查看>>
webpack css文件处理
查看>>
mysql二进制包安装和遇到的问题
查看>>
MySql二进制日志的应用及恢復
查看>>
mysql互换表中两列数据方法
查看>>
mysql五补充部分:SQL逻辑查询语句执行顺序
查看>>
mysql交互式连接&非交互式连接
查看>>
MySQL什么情况下会导致索引失效
查看>>
Mysql什么时候建索引
查看>>
MySql从入门到精通
查看>>
MYSQL从入门到精通(一)
查看>>
MYSQL从入门到精通(二)
查看>>
mysql以下日期函数正确的_mysql 日期函数
查看>>
mysql以服务方式运行
查看>>
mysql优化--索引原理
查看>>