前端积累
PC端初始化样式
不考虑兼容 IE
/*css reset*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
*::before,
*::after {
box-sizing: border-box;
}
a {
color: inherit;
text-decoration: none;
}
i,em{
font-style: normal
}
b,strong{
font-weight: normal
}
/* 清除a、u标签默认下划线 */
a,u{
text-decoration: none
}
input,
button {
font-family: inherit;
}
ol,
ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.flex {
display: flex;
}
.flex-center {
display: flex;
align-items: center;
}
/*子元素水平两端对齐*/
.flex-pack-justify {
display: flex;
justify-content: space-between;
}
/*1行超出隐藏*/
.text-ellip {
overflow: hidden;
white-space: nowrap;
word-wrap: normal;
word-break: keep-all;
text-overflow: ellipsis;
}
/*2行超出隐藏*/
.text-ellip2 {
overflow: hidden;
text-overflow: ellipsis;
/*将对象作为弹性伸缩盒子模型显示。*/
display: -webkit-box;
/*从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）*/
-webkit-box-orient: vertical;
/*这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。*/
-webkit-line-clamp: 2;
}
.fl {
float: left;
}
.fr {
float: right;
}
.clearfix:after {
content: '';
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.clearfix {
*zoom: 1;
}
.img-responsive {
max-width: 100%;
display: block;
}
清除浮动
单伪元素
.fl { float: left; }
.fr { float: right; }
.clearfix:after { content: ''; display: block; height: 0; visibility: hidden; clear: both; }
.clearfix { *zoom: 1; }
双伪元素
.fl { float: left; }
.fr { float: right; }
.clearfix:after { content: ''; display: table; clear:both}
.clearfix { *zoom: 1; }
PC端样式初始化
考虑兼容 IE 低版本浏览器
/*css reset*/* { margin: 0; padding: 0; box-sizing: border-box; }*::before,*::after { box-sizing: border-box; }a { color: inherit; text-decoration: none; }input,button { font-family: inherit; }i,em { font-style: normal }b,strong { font-weight: normal }/* 清除a、u标签默认下划线 */a,u { text-decoration: none }ol,ul { list-style: none; }table { border-collapse: collapse; border-spacing: 0; }/*1行超出隐藏*/.text-ellip { overflow: hidden; white-space: nowrap; word-wrap: normal; word-break: keep-all; text-overflow: ellipsis; }/*2行超出隐藏*/.text-ellip2 { overflow: hidden; text-overflow: ellipsis; /*将对象作为弹性伸缩盒子模型显示。*/display: -webkit-box;/*从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）*/-webkit-box-orient: vertical; /*这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。*/-webkit-line-clamp: 2; }.fl { float: left; }.fr { float: right; }.clearfix:after { content: ''; display: table; clear: both; }.clearfix { *zoom: 1; }.img-responsive { max-width: 100%; display: block; }
移动端初始化样式
/*css reset*/
/* 当设计图宽度为750px */
html {
font-size: 0.5334vw
}
* { margin: 0; padding: 0; box-sizing: border-box; }*::before,*::after { box-sizing: border-box; }a { color: inherit; text-decoration: none; }input,button { font-family: inherit; }ol,ul { list-style: none; }table { border-collapse: collapse; border-spacing: 0; }em { font-style: normal; }.flex { display: flex; }.flex-center { display: flex; align-items: center; }/*子元素水平两端对齐*/.flex-pack-justify { display: flex; justify-content: space-between; }/*1行超出隐藏*/.text-ellip { overflow: hidden; white-space: nowrap; word-wrap: normal; word-break: keep-all; text-overflow: ellipsis; }/*2行超出隐藏*/.text-ellip2 { overflow: hidden; text-overflow: ellipsis; /*将对象作为弹性伸缩盒子模型显示。*/display: -webkit-box;/*从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）*/-webkit-box-orient: vertical; /*这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。*/-webkit-line-clamp: 2; }.fl { float: left; }.fr { float: right; }.clearfix:after { content: ''; display: table; }.clearfix { *zoom: 1; }.img-responsive { max-width: 100%; display: block; }.maxw720 { max-width: 720px; min-width: 320px; margin: 0 auto; }
// 实现 1px / 0.5px
// 伪元素2倍尺寸1px边框scale缩小一半
.box5 {
position: relative;
}
.box5::after {
position: absolute;
bottom: 0;
z-index: -1;
width: 200%;
height: 200%;
content: "";
display: block;
border: 1px solid #000;
border-radius: 10px;
transform: scale(0.5);
transform-origin: left bottom;
}
/*垂直水平居中*/
定位方法
父元素 position:relative;
子元素
position:absolute;
top:0px;
right:0px;
left:0px;
bottom:0px;
margin:auto;
HTML
移动端适配
Meta
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover"]]>
CSS rem
html {
width: 100%;
margin: 0 auto;
font-family: "微软雅黑", Tahoma, Helvetica, Arial, sans-serif;
font-size: calc(100vw / 750);
font-size: -webkit-calc(100vw / 750);
font-size: -moz-calc(100vw / 750);
-webkit-text-size-adjust: 100%;
/*页面点击链接时会出现高亮框，此代码用来解决*/
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
/*在谷歌里面，小于12号字都会直接显示为12号字，此代码解除此问题*/
/* -webkit-text-size-adjust: none; */
}
动态 rem
const WIDTH = 750;
const setView = () => {
document.documentElement.style.fontSize = (100 * screen.width / WIDTH) + 'px'
}
window.onorientationchange = setView
setView()
// 提供一个rem的换算 直接除100的
(function() {
'use strict';
//获取设备宽度 并计算其与UI界面的比例并将其设置到html的style中作为rem值
var screenWidth;
var html = document.getElementsByTagName("html")[0];
if (window.innerWidth) {//标准浏览器的写法
screenWidth = window.innerWidth;
} else if ((document.body) && (document.body.clientWidth)) {//非标准浏览器ie10以下
screenWidth = document.body.clientWidth;
}
html.style.fontSize = 100 * screenWidth / 750 + "px";
})();
