Created
March 7, 2016 12:04
-
-
Save black-black-cat/8e085974980ce74bb11d to your computer and use it in GitHub Desktop.
html元素的字体大小
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@charset "utf-8"; | |
/* ============================= 重置样式 ===================================*/ | |
/* 清除内外边距 */ | |
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */ | |
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ | |
pre, /* text formatting elements 文本格式元素 */ | |
fieldset, legend, button, input, textarea, /* form elements 表单元素 */ | |
th, td { /* table elements 表格元素 */ | |
margin: 0; | |
padding: 0; | |
} | |
/* 设置默认字体 */ | |
body, | |
button, input, select, textarea { /* for ie */ | |
/*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/ | |
font: 12px/1 Tahoma, Helvetica, Arial, sans-serif; | |
/* 用 ascii 字符表示,使得在任何编码下都无问题 */ | |
} | |
h1 { | |
font-size: 18px; /* 18px / 12px = 1.5 */ | |
} | |
h2 { | |
font-size: 16px; | |
} | |
h3 { | |
font-size: 14px; | |
} | |
h4, h5, h6 { | |
font-size: 100%; | |
} | |
address, cite, dfn, em, var { | |
font-style: normal; | |
} | |
/* 将斜体扶正 */ | |
code, kbd, pre, samp, tt { | |
font-family: "Courier New", Courier, monospace; | |
} | |
/* 统一等宽字体 */ | |
small { | |
font-size: 12px; | |
} | |
/* 小于 12px 的中文很难阅读,让 small 正常化 */ | |
/* 重置列表元素 */ | |
ul, ol { | |
list-style: none; | |
} | |
/* 重置文本格式元素 */ | |
a { | |
text-decoration: none; | |
} | |
a:hover { | |
text-decoration: underline; | |
} | |
abbr[title], acronym[title] { /* 注:1.ie6 不支持 abbr; 2.这里用了属性选择符,ie6 下无效果 */ | |
border-bottom: 1px dotted; | |
cursor: help; | |
} | |
q:before, q:after { | |
content: ''; | |
} | |
/* 重置表单元素 */ | |
legend { | |
color: #000; | |
} | |
/* for ie6 */ | |
fieldset, img { | |
border: none; | |
} | |
/* img 搭车:让链接里的 img 无边框 */ | |
/* 注:optgroup 无法扶正 */ | |
button, input, select, textarea { | |
font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */ | |
} | |
/* 重置表格元素 */ | |
table { | |
border-collapse: collapse; | |
border-spacing: 0; | |
} | |
/* 重置 hr */ | |
hr { | |
border: none; | |
height: 1px; | |
} | |
/* 让非ie浏览器默认也显示垂直滚动条,防止因滚动条引起的闪烁 */ | |
html { | |
overflow-y: scroll; | |
/* 我的浏览器最小字体是13px,css设置小于13px的字体会变为13px | |
设计图宽为640px | |
pc chrome 大字模式 100%的字体大小为20px | |
pc chrome 普通模式 100%的字体大小为16px | |
*/ | |
font-size: 100%; | |
} | |
img { | |
max-width: 100%; | |
} | |
/* ============================ 开始布局 ================================= */ | |
@media screen and (min-width: 0px) and (max-width: 640px) { | |
header { | |
background-color: #e4366b; | |
width: 100%; | |
height: 10rem; | |
} | |
section:nth-of-type(1) { | |
height: 0.9rem; | |
width: 100%; | |
background: #535258; | |
border-top: 1px solid #333; | |
border-bottom: 1px solid #333; | |
} | |
.search { | |
width: 94%; | |
height: 0.6rem; | |
margin: 0.18rem auto; | |
background-color: #FFFFFF; | |
border-radius: 0.3rem; | |
} | |
.search-img { | |
display: block; | |
float: left; | |
width: 8%; | |
margin-top: 0.1rem; | |
margin-left: 0.2rem; | |
} | |
.search-input { | |
float: left; | |
width: 86%; | |
height: 0.4rem; | |
border: 0; | |
outline: none; | |
font-size: 16px; | |
color: #b2b2b4; | |
margin-top: 0.1rem; | |
} | |
.focus img { | |
width: 100%; | |
} | |
.swiper-pagination-bullet { | |
background-color: #e4366b; | |
} | |
.goods-item-pic { | |
width: 26%; | |
padding: 0.16rem; | |
} | |
.goods-item-content { | |
width: 72%; | |
} | |
} | |
@media screen and (min-width: 321px) and (max-width: 375px) { | |
header { | |
width: 100%; | |
height: 100%; | |
background-color: blue; | |
} | |
} | |
/* ========================================================================== | |
Helper classes | |
========================================================================== */ | |
/* | |
* Hide visually and from screen readers | |
*/ | |
.hidden { | |
display: none !important; | |
} | |
/* | |
* Hide visually and from screen readers, but maintain layout | |
*/ | |
.invisible { | |
visibility: hidden; | |
} | |
/* | |
* Clearfix: contain floats | |
* | |
* For modern browsers | |
* 1. The space content is one way to avoid an Opera bug when the | |
* `contenteditable` attribute is included anywhere else in the document. | |
* Otherwise it causes space to appear at the top and bottom of elements | |
* that receive the `clearfix` class. | |
* 2. The use of `table` rather than `block` is only necessary if using | |
* `:before` to contain the top-margins of child elements. | |
*/ | |
.clearfix:before, | |
.clearfix:after { | |
content: ""; /* 1 */ | |
display: table; /* 2 */ | |
} | |
.clearfix:after { | |
clear: both; | |
} | |
.fll { | |
float: left; | |
} | |
.flr { | |
float: right; | |
} | |
.iblock { | |
display: inline-block; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment