html元素的字体大小

style.css

@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;
}