一个前端小demo，里面蕴藏了很多大厂的知识点
demo展示
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>手机解锁</title>
<script src="./base.js"></script>
<link rel="stylesheet" href="./common.css">
</head>
<body>
<!-- BEM Block Element Modifier -->
<div class="page">
<div class="page__hd">输入密码</div>
<div class="page__bd">
<!-- Block -->
<div class="content">
<div class="content__left">
<div class="number">1</div>
<div class="number">4</div>
<div class="number">7</div>
</div>
<div class="content__mid">
<div class="number">2</div>
<div class="number">5</div>
<div class="number">8</div>
<div class="number">0</div>
</div>
<div class="content__right">
<div class="number">3</div>
<div class="number">6</div>
<div class="number">9</div>
</div>
</div>
</div>
<div class="page__ft">
<div class="page__call">紧级呼叫</div>
<div class="page__cancel">清除</div>
</div>
</div>
</body>
</html>
css
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
.page {
height: 100%;
overflow: hidden;
background-image: url("https://images.unsplash.com/photo-1440613905118-99b921706b5c?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=255b304482a2f50d0917f3de7b06251e%27");
background-repeat: no-repeat;
background-size: cover;
background-position: bottom center;
}
.page .page__hd {
color: #000;
font-size: 0.46rem;
width: 1.86667rem;
height: 0.555rem;
margin: 2.96rem auto;
}
.page .page__ft {
display: flex;
padding-top: 0.59rem;
margin-bottom: 0.259rem;
color: rgba(255,255,255,0.5);
font-size: 0.444rem;
}
.page .page__ft .page__call {
flex: 1;
margin-left: 0.25rem;
}
.page .page__ft .page__cancel {
width: 1.88rem;
}
.page .content {
width: 6.96rem;
display: flex;
margin-left: 1.45rem;
}
.page .content .number {
width: 1.62rem;
height: 1.62rem;
line-height: 1.62rem;
border-radius: 50%;
border: 2px solid #81969c;
text-align: center;
font-weight: 100;
color: #e8ffff;
margin-bottom: 0.72rem;
}
.page .content .content__mid,
.page .content .content__left {
margin-right: 1.03rem;
}
js
//提供一个适配所以机型的rem工具 // 1. 屏幕宽度
// 2. html
// 3. fontsize
// 立即执行函数
// ipad
// DRY dont repeat yourself
(function () {
// html 动态设置font-size
// 函数作用域
// 变量 ，不会被污染外面的
var htmlElement = document.documentElement
function getFontsize() {
var width = document.documentElement.clientWidth// 或者 window.innterwidth
var fontSize = width / 10
return fontSize
}
htmlElement.style.fontSize = getFontsize() + 'px'
window.addEventListener('resize', function () {
htmlElement.documentElement.style.fontSize = getFontsize() + 'px';
})
})()
这是一个手机锁屏的demo，大家查看的时候记得调成手机模式哦。
这个demo里面到底是如何完成的呢？
html主体的架构
先写主体再写样式，这是大厂编程的素养。所以在写一个这样的demo之前我们肯定是先写好一个大体的html结构。首先分析一下，该怎么去写这个主体。可以分成三部分，按照块级元素的划分，输入密码一部分，密码主体一部分，下面的紧急呼救和清除一部分。然后再去细分化。
- 注意要点 取名要规范 BEM取名法(团队取名规范统一）
css样式
先主体再样式，现在轮到写样式了，那样式里面又有什么需要注意的地方呢？
-
单位 我们写的demo是手机屏幕，那需要考虑什么问题呢？那就是要适合所有的机型，所有单位就尤为重要！！！ 我们的单位用的都是rem(rem是相对单位，可以根据根元素进行调整比如
html{font-size:16px;}，1rem相当于16px。） -
更加先进的工具，让css样式事半功倍
看到这个.styl格式的文件嘛，我们可以在这里书写样式，自动生成到css的文件里面，这种书写方式可以省去很多冒号，大括号等各种符号（提前下班和小姐姐吃饭 开心）
这是在styl里面的书写格式，缩进决定了层级关系。书写更便捷。 关于styl的安装和使用我们下次再细谈，保证用了绝对爱不释手。
js 自己封装函数 顶级大厂的素养 制作一个适合所有机型的rem工具
我们说rem是相对根元素大小的，如html的根元素是16px,则1rem=16px，但是不是所有的机型根元素大小都是一样的，那我们css里面写的大小不就不能用嘛，所以我们要用js实现一个试配工具，当然有大厂封装的可以直接用，但是想进大厂就得自己手写出来。
- 思路
- 屏幕宽度
- html
- 修改font-size
- 要点
- 使用立即执行函数 不写变量名，防止污染其他的函数
- 不要重复造轮子，相同的用一个变量保存，提高复用率
- 函数封装，代码超过10行就要考虑封装起来，提高代码利用率和复用性。 切记 do not repeat yourself.
好啦！！！ 一个极具大厂素养的小demo送给大家，周密愉快。