前沿
在最近开发中，需要用到一些公共的自己写好的笔记的时候，发现老是到处乱找代码，之前也有存储，各种笔记，各种备份，但是发现好不方便，于是就想到了网络是个好东西，就开始记录下来，方便自己以后使用，一方面提醒自己时刻保持这种做笔记的好处，另一方面可以提高自己的开发效率，毕竟好记性不如烂笔头吗。这个笔记以后会随时更新，因为开发过程中会遇到各种问题。希望可以多多提意见。
//此base.css为pc端公共css代码。
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
li {
list-style: none;
}
input {
outline: none;
}
.W100 {
width: 100%;
}
.H100 {
height: 100%;
}
.Bai100 {
width: 100%;
height: 100%;
}
.FL {
float: left;
}
.FR {
float: right;
}
.PR {
position: relative;
}
.PA {
position: absolute;
}
.PF {
position: fixed;
}
.hide {
display: none;
}
.TAC {
text-align: center;
}
.TAL {
text-align: left;
}
.TAR {
text-align: right;
}
.F12 {
font-size: 12px;
}
.F14 {
font-size: 14px;
}
.F16 {
font-size: 16px;
}
.F18 {
font-size: 18px;
}
.F20 {
font-size: 20px;
}
.F22 {
font-size: 22px;
}
.F24 {
font-size: 24px;
}
.CorRed {
color: red;
}
.CorW {
color: white;
}
.CorB {
color: black;
}
.BGCW {
background: #ffffff;
}
.BGCB {
background: #000000;
}
// is change every project
.HomeColor {
color: #432654;
}
// Out of display...
.Ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.MT20 {
margin-top: 20px;
}
.flexCenter{
display: flex;
justify-content: center;
align-items: center;
}
此处为移动端rem计算方式，适配rem.
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if(!clientWidth) return;
//此处是根据ui图来匹配的，一般移动端是375像素的，可以根据ui图的基准值来改变。
docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';
doc.body.style.display = 'block';
};
if(!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
在vue-cli 脚手架中如何让使用方法
只需要在vue项目中的目录下的
index.html中写入方法，运行就可以了
例如
<script type='text/javascript'>
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if(!clientWidth) return;
//此处是根据ui图来匹配的，一般移动端是375像素的，可以根据ui图的基准值来改变。
docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';
doc.body.style.display = 'block';
};
if(!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
这样的话直接在你的项目中使用就可以，如果ui给的宽是20px,那么你直接写
0.2rem就好了。
此处为移动端base.css，要结合上边的rem使用
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
cursor: pointer;
/*移除移动端点击时蓝色遮罩*/
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html,
body {
width: 100%;
/*IOS下会影响滑动,建议不写*/
height: 100%;
}
/**
* IOS下移除原生样式，正常显示按钮
*/
input {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-appearance: none;
}
/**
* 移除a标签的下划线
*/
a {
text-decoration: none;
cursor: pointer;
}
.BorderRadius10 {
border-radius: 10px;
}
.TitleBgColor {
background-color: #911A56;
}
.TitleFontColor {
color: blue;
}
.BgColor {
background-color: #FFFFFF;
}
.Font10 {
font-size: 0.1rem;
}
.Font11 {
font-size: 0.11rem;
}
.Font12 {
font-size: 0.12rem;
}
.Font13 {
font-size: 0.13rem;
}
.Font14 {
font-size: 0.14rem;
}
.Font15 {
font-size: 0.15rem;
}
.Font16 {
font-size: 0.16rem;
}
.Font18 {
font-size: 0.18rem;
}
.Font32 {
font-size: 0.32rem;
}
.Width100 {
width: 100%;
}
.Height100 {
height: 100%;
}
.ColorWhite {
color: #FFFFFF;
}
.ColorGreen {
color: green;
}
.ColorRed {
color: red;
}
.Bai100 {
width: 100%;
height: 100%;
}
.FL {
float: left;
}
.FR {
float: right;
}
.PR {
position: relative;
}
.PA {
position: absolute;
}
.PF {
position: fixed;
}
.hide {
display: none;
}
.flexCenter{
display: flex;
justify-content: center;
align-items: center;
}
网友评论