博客
关于我
在线教育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/

你可能感兴趣的文章
Multiple websites on single instance of IIS
查看>>
mysql CONCAT()函数拼接有NULL
查看>>
multiprocessing.Manager 嵌套共享对象不适用于队列
查看>>
multiprocessing.pool.map 和带有两个参数的函数
查看>>
MYSQL CONCAT函数
查看>>
multiprocessing.Pool:map_async 和 imap 有什么区别?
查看>>
MySQL Connector/Net 句柄泄露
查看>>
multiprocessor(中)
查看>>
mysql CPU使用率过高的一次处理经历
查看>>
Multisim中555定时器使用技巧
查看>>
MySQL CRUD 数据表基础操作实战
查看>>
multisim变压器反馈式_穿过隔离栅供电:认识隔离式直流/ 直流偏置电源
查看>>
mysql csv import meets charset
查看>>
multivariate_normal TypeError: ufunc ‘add‘ output (typecode ‘O‘) could not be coerced to provided……
查看>>
MySQL DBA 数据库优化策略
查看>>
multi_index_container
查看>>
MySQL DBA 进阶知识详解
查看>>
Mura CMS processAsyncObject SQL注入漏洞复现(CVE-2024-32640)
查看>>
Mysql DBA 高级运维学习之路-DQL语句之select知识讲解
查看>>
mysql deadlock found when trying to get lock暴力解决
查看>>