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

你可能感兴趣的文章
logstash mysql 准实时同步到 elasticsearch
查看>>
Luogu2973:[USACO10HOL]赶小猪
查看>>
mabatis 中出现&lt; 以及&gt; 代表什么意思?
查看>>
Mac book pro打开docker出现The data couldn’t be read because it is missing
查看>>
MAC M1大数据0-1成神篇-25 hadoop高可用搭建
查看>>
mac mysql 进程_Mac平台下启动MySQL到完全终止MySQL----终端八步走
查看>>
Mac OS 12.0.1 如何安装柯美287打印机驱动,刷卡打印
查看>>
MangoDB4.0版本的安装与配置
查看>>
Manjaro 24.1 “Xahea” 发布!具有 KDE Plasma 6.1.5、GNOME 46 和最新的内核增强功能
查看>>
mapping文件目录生成修改
查看>>
MapReduce程序依赖的jar包
查看>>
mariadb multi-source replication(mariadb多主复制)
查看>>
MariaDB的简单使用
查看>>
MaterialForm对tab页进行隐藏
查看>>
Member var and Static var.
查看>>
memcached高速缓存学习笔记001---memcached介绍和安装以及基本使用
查看>>
memcached高速缓存学习笔记003---利用JAVA程序操作memcached crud操作
查看>>
Memcached:Node.js 高性能缓存解决方案
查看>>
memcache、redis原理对比
查看>>
memset初始化高维数组为-1/0
查看>>