Skip to content

Commit 6d38852

Browse files
author
人心思动
authored
Add files via upload
1 parent a6e7c87 commit 6d38852

File tree

2 files changed

+207
-0
lines changed

2 files changed

+207
-0
lines changed

‎消除不同的浏览器在默认样式上不同表现reset.css

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
@charset "utf-8";html{background-color:#fff;color:#000;font-size:12px}
2+
body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,pre,xmp{margin:0;padding:0}
3+
body,input,textarea,button,select,pre,xmp,tt,code,kbd,samp{line-height:1.5;font-family:tahoma,arial,"Hiragino Sans GB",simsun,sans-serif}
4+
h1,h2,h3,h4,h5,h6,small,big,input,textarea,button,select{font-size:100%}
5+
h1,h2,h3,h4,h5,h6{font-family:tahoma,arial,"Hiragino Sans GB","微软雅黑",simsun,sans-serif}
6+
h1,h2,h3,h4,h5,h6,b,strong{font-weight:normal}
7+
address,cite,dfn,em,i,optgroup,var{font-style:normal}
8+
table{border-collapse:collapse;border-spacing:0;text-align:left}
9+
caption,th{text-align:inherit}
10+
ul,ol,menu{list-style:none}
11+
fieldset,img{border:0}
12+
img,object,input,textarea,button,select{vertical-align:middle}
13+
article,aside,footer,header,section,nav,figure,figcaption,hgroup,details,menu{display:block}
14+
audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
15+
blockquote:before,blockquote:after,q:before,q:after{content:"\0020"}
16+
textarea{overflow:auto;resize:vertical}
17+
input,textarea,button,select,a{outline:0 none;border: none;}
18+
button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}
19+
mark{background-color:transparent}
20+
a,ins,s,u,del{text-decoration:none}
21+
sup,sub{vertical-align:baseline}
22+
html {overflow-x: hidden;height: 100%;font-size: 50px;-webkit-tap-highlight-color: transparent;}
23+
body {font-family: Arial, "Microsoft Yahei", "Helvetica Neue", Helvetica, sans-serif;color: #333;font-size: .28em;line-height: 1;-webkit-text-size-adjust: none;}
24+
hr {height: .02rem;margin: .1rem 0;border: medium none;border-top: .02rem solid #cacaca;}
25+
a {color: #25a4bb;text-decoration: none;}

‎移动端1px像素.css

+182
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
@charset "utf-8";
2+
.border,
3+
.border-top,
4+
.border-right,
5+
.border-bottom,
6+
.border-left,
7+
.border-topbottom,
8+
.border-rightleft,
9+
.border-topleft,
10+
.border-rightbottom,
11+
.border-topright,
12+
.border-bottomleft {
13+
position: relative;
14+
}
15+
.border::before,
16+
.border-top::before,
17+
.border-right::before,
18+
.border-bottom::before,
19+
.border-left::before,
20+
.border-topbottom::before,
21+
.border-topbottom::after,
22+
.border-rightleft::before,
23+
.border-rightleft::after,
24+
.border-topleft::before,
25+
.border-topleft::after,
26+
.border-rightbottom::before,
27+
.border-rightbottom::after,
28+
.border-topright::before,
29+
.border-topright::after,
30+
.border-bottomleft::before,
31+
.border-bottomleft::after {
32+
content: "\0020";
33+
overflow: hidden;
34+
position: absolute;
35+
}
36+
/* border
37+
* 因，边框是由伪元素区域遮盖在父级
38+
* 故，子级若有交互，需要对子级设置
39+
* 定位 及 z轴
40+
*/
41+
.border::before {
42+
box-sizing: border-box;
43+
top: 0;
44+
left: 0;
45+
height: 100%;
46+
width: 100%;
47+
border: 1px solid #eaeaea;
48+
transform-origin: 0 0;
49+
}
50+
.border-top::before,
51+
.border-bottom::before,
52+
.border-topbottom::before,
53+
.border-topbottom::after,
54+
.border-topleft::before,
55+
.border-rightbottom::after,
56+
.border-topright::before,
57+
.border-bottomleft::before {
58+
left: 0;
59+
width: 100%;
60+
height: 1px;
61+
}
62+
.border-right::before,
63+
.border-left::before,
64+
.border-rightleft::before,
65+
.border-rightleft::after,
66+
.border-topleft::after,
67+
.border-rightbottom::before,
68+
.border-topright::after,
69+
.border-bottomleft::after {
70+
top: 0;
71+
width: 1px;
72+
height: 100%;
73+
}
74+
.border-top::before,
75+
.border-topbottom::before,
76+
.border-topleft::before,
77+
.border-topright::before {
78+
border-top: 1px solid #eaeaea;
79+
transform-origin: 0 0;
80+
}
81+
.border-right::before,
82+
.border-rightbottom::before,
83+
.border-rightleft::before,
84+
.border-topright::after {
85+
border-right: 1px solid #eaeaea;
86+
transform-origin: 100% 0;
87+
}
88+
.border-bottom::before,
89+
.border-topbottom::after,
90+
.border-rightbottom::after,
91+
.border-bottomleft::before {
92+
border-bottom: 1px solid #eaeaea;
93+
transform-origin: 0 100%;
94+
}
95+
.border-left::before,
96+
.border-topleft::after,
97+
.border-rightleft::after,
98+
.border-bottomleft::after {
99+
border-left: 1px solid #eaeaea;
100+
transform-origin: 0 0;
101+
}
102+
.border-top::before,
103+
.border-topbottom::before,
104+
.border-topleft::before,
105+
.border-topright::before {
106+
top: 0;
107+
}
108+
.border-right::before,
109+
.border-rightleft::after,
110+
.border-rightbottom::before,
111+
.border-topright::after {
112+
right: 0;
113+
}
114+
.border-bottom::before,
115+
.border-topbottom::after,
116+
.border-rightbottom::after,
117+
.border-bottomleft::after {
118+
bottom: 0;
119+
}
120+
.border-left::before,
121+
.border-rightleft::before,
122+
.border-topleft::after,
123+
.border-bottomleft::before {
124+
left: 0;
125+
}
126+
@media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx) {
127+
/* 默认值，无需重置 */
128+
}
129+
@media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49), (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49), (min-resolution: 144dpi) and (max-resolution: 239dpi), (min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) {
130+
.border::before {
131+
width: 200%;
132+
height: 200%;
133+
transform: scale(.5);
134+
}
135+
.border-top::before,
136+
.border-bottom::before,
137+
.border-topbottom::before,
138+
.border-topbottom::after,
139+
.border-topleft::before,
140+
.border-rightbottom::after,
141+
.border-topright::before,
142+
.border-bottomleft::before {
143+
transform: scaleY(.5);
144+
}
145+
.border-right::before,
146+
.border-left::before,
147+
.border-rightleft::before,
148+
.border-rightleft::after,
149+
.border-topleft::after,
150+
.border-rightbottom::before,
151+
.border-topright::after,
152+
.border-bottomleft::after {
153+
transform: scaleX(.5);
154+
}
155+
}
156+
@media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5), (min-device-pixel-ratio: 2.5), (min-resolution: 240dpi), (min-resolution: 2.5dppx) {
157+
.border::before {
158+
width: 300%;
159+
height: 300%;
160+
transform: scale(.33333);
161+
}
162+
.border-top::before,
163+
.border-bottom::before,
164+
.border-topbottom::before,
165+
.border-topbottom::after,
166+
.border-topleft::before,
167+
.border-rightbottom::after,
168+
.border-topright::before,
169+
.border-bottomleft::before {
170+
transform: scaleY(.33333);
171+
}
172+
.border-right::before,
173+
.border-left::before,
174+
.border-rightleft::before,
175+
.border-rightleft::after,
176+
.border-topleft::after,
177+
.border-rightbottom::before,
178+
.border-topright::after,
179+
.border-bottomleft::after {
180+
transform: scaleX(.33333);
181+
}
182+
}

0 commit comments

Comments
 (0)