移动端制作公共样式reset

最新推荐文章于 2022-07-10 09:42:36 发布

转载最新推荐文章于 2022-07-10 09:42:36 发布 · 129 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/sakura-sakura/p/6678186.html

本文介绍了一个优秀的移动端Web App初始化样式的实现方案，确保了在不同设备和浏览器上的视觉一致性，包括字体、颜色、内外边距等关键样式设置。

原文链接：http://caibaojian.com/mobile-web-app-fix.html

写一个好的web app初始化样式很重要，以下为之前的flexible.js中项目的同个样式。


原文链接：http://caibaojian.com/mobile-web-app-fix.html
@charset"utf-8";
 
html {
 
    color: #000;
 
    background: #fff;
 
    overflow-y: scroll;
 
    -webkit-text-size-adjust: 100%;
 
    -ms-text-size-adjust: 100%;
 
}
 
html * {
 
    outline:none;
 
    -webkit-text-size-adjust: none;
 
    -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
 
}
 
html, body {
 
    font-family: sans-serif;
 
}
 
/* 内外边距通常让各个浏览器样式的表现位置不同 */
 
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
 
    margin: 0;
 
    padding: 0;
 
}
 
input, select, textarea {
 
    font-size: 100%;
 
}
 
/* 去掉各 Table cell 的边距并让其边重合 */
 
table {
 
    border-collapse: collapse;
 
    border-spacing: 0;
 
}
 
/* 去除默认边框 */
 
fieldset, img {
 
    border: 0;
 
}
 
/* 去掉 firefox 下此元素的边框 */
 
abbr, acronym {
 
    border: 0;
 
    font-variant: normal;
 
}
 
/* 一致的 del 样式 */
 
del {
 
    text-decoration: line-through;
 
}
 
address, caption, cite, code, dfn, em, th, var {
 
    font-style: normal;
 
    font-weight: 500;
 
}
 
/* 去掉列表前的标识, li 会继承 */
 
ol, ul {
 
    list-style: none;
 
}
 
/* 对齐是排版最重要的因素, 别让什么都居中 */
 
caption, th {
 
    text-align: left;
 
}
 
/* 来自 yahoo, 让标题都自定义, 适应多个系统应用 */
 
h1, h2, h3, h4, h5, h6 {
 
    font-size: 100%;
 
    font-weight: 500;
 
}
 
q:before, q:after {
 
    content:'';
 
}
 
/* 统一上标和下标 */
 
sub, sup {
 
    font-size: 75%;
 
    line-height: 0;
 
    position: relative;
 
    vertical-align: baseline;
 
}
 
sup {
 
    top: -0.5em;
 
}
 
sub {
 
    bottom: -0.25em;
 
}
 
/* 正常链接 未访问 */
 
a:link {
 
}
 
/* 鼠标悬停 */
 
a:hover {
 
    text-decoration: underline;
 
}
 
/* 默认不显示下划线，保持页面简洁 */
 
ins, a {
 
    text-decoration: none;
 
}

转载于:https://www.cnblogs.com/sakura-sakura/p/6678186.html