前端开发公共css，js笔记

前沿

---

在最近开发中，需要用到一些公共的自己写好的笔记的时候，发现老是到处乱找代码，之前也有存储，各种笔记，各种备份，但是发现好不方便，于是就想到了网络是个好东西，就开始记录下来，方便自己以后使用，一方面提醒自己时刻保持这种做笔记的好处，另一方面可以提高自己的开发效率，毕竟好记性不如烂笔头吗。这个笔记以后会随时更新，因为开发过程中会遇到各种问题。希望可以多多提意见。

//此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;
}