Skip to content

Instantly share code, notes, and snippets.

@blackcater
Forked from xiaojue/common.css
Last active December 13, 2016 07:55
Show Gist options
  • Save blackcater/f7022b2f8bf54bd08b0db66cf5cf5833 to your computer and use it in GitHub Desktop.
Save blackcater/f7022b2f8bf54bd08b0db66cf5cf5833 to your computer and use it in GitHub Desktop.
common.scss
@charset 'UTF-8';
// css reset
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
border: 0;
margin: 0;
outline: 0;
padding: 0;
}
html,
body,
form,
fieldset,
p,
div,
h1,
h2,
h3,
h4,
h5,
h6 {
text-size-adjust: none;
}
html {
font-family: -apple-system, "Helvetica Neue", Arial, "PingFang SC", "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}
body {
background: #eee;
color: #1a1a1a;
min-width: 320px;
overflow-x: hidden;
// -webkit-overflow-scrolling: touch;
}
a {
background: transparent;
color: #1a1a1a;
-webkit-tap-highlight-color: transparent;
text-decoration: none;
&:active {
color: #3990e6;
outline: 0;
}
}
audio,
canvas,
progress,
video {
display: inline-block;
vertical-align: baseline;
}
audio:not([controls]) {
display: none;
height: 0;
}
svg:not(:root) {
overflow: hidden;
}
hr {
box-sizing: content-box;
height: 0;
}
pre {
overflow: auto;
white-space: pre;
word-wrap: break-word;
}
code,
kbd,
pre,
samp {
font-family: "Ayuthata", monospace;
}
mark {
background: #ff0;
color: #1a1a1a;
}
dfn {
font-style: italic;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
ul,
ol {
list-style: none outside none;
}
h1,
h2,
h3,
strong {
font-weight: 600;
}
img {
border: 0;
-ms-interpolation-mode: bicubic;
vertical-align: middle;
}
button {
border: 0;
outline: none;
overflow: visible;
}
button,
select {
text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
[disabled] {
cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
input {
line-height: normal;
}
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
-webkit-appearance: textfield;
box-sizing: border-box;
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
textarea {
overflow: auto;
resize: vertical;
}
button,
input,
select,
textarea {
font-family: -apple-system, "Helvetica Neue", Arial, "PingFang SC", "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
color: #ccc;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
color: #ccc;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #ccc;
}
html,
body {
height: 100%;
}
// common
.border_box{
box-sizing: border-box;
}
.fl {
float: left;
}
.fr {
float: right;
}
.hide {
display: none;
}
.show {
display: block;
}
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.break {
word-break: break-all;
word-wrap: break-word;
}
.clearfix:after {
clear: both
content: '\0020';
display: block;
height: 0;
}
.clearfix {
*zoom: 1;
}
// mobile
@media only screen and (min-width: 359px){
html {
font-size: 22.5px * .8;
}
}
@media only screen and (min-width: 374px){
html {
font-size: 23.5px * .8;
}
}
@media only screen and (min-width: 401px){
html {
font-size: 25px * .8;
}
}
@media only screen and (min-width: 428px){
html {
font-size: 26.75px * .8;
}
}
@media only screen and (min-width: 481px){
html {
font-size: 30px * .8;
}
}
@media only screen and (min-width: 569px){
html {
font-size: 35px * .8;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment