/* 初始化基础样式 */  
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, embed,   
figure, figcaption, footer, header, hgroup,   
menu, nav, output, ruby, section, summary,  
time, mark, audio, video {  
    margin: 0;  
    padding: 0;  
    border: 0;  
    font-size: 100%;  
    font: inherit;  
    vertical-align: baseline;  
}  
/* HTML5 display-role reset for older browsers */  
article, aside, details, figcaption, figure,   
footer, header, hgroup, menu, nav, section {  
    display: block;  
}  
body {  
    line-height: 1;  
}  
ol, ul {  
    list-style: none;  
}  
blockquote, q {  
    quotes: none;  
}  
blockquote:before, blockquote:after,  
q:before, q:after {  
    content: '';  
    content: none;  
}  
table {  
    border-collapse: collapse;  
    border-spacing: 0;  
}  
  
/* 初始化移动端样式 */  
body {  
    -webkit-text-size-adjust: 100%; /* 防止iOS调整字体大小 */  
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* 移除点击高亮 */  
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; /* 使用系统默认字体 */  
    color: #333; /* 设置默认字体颜色 */  
    background-color: #fff; /* 设置默认背景颜色 */  
}  
  
/* 设置视口宽度为设备宽度，并禁止用户缩放 */  
@viewport {  
    width: device-width;  
    zoom: 1.0;  
    user-zoom: fixed;  
    max-zoom: 1.0;  
    min-zoom: 1.0;  
}  
  
/* 针对iOS Safari浏览器 */  
input[type="text"],  
input[type="tel"],  
input[type="url"],  
input[type="email"],  
input[type="search"],  
input[type="password"],  
textarea {  
    -webkit-appearance: none; /* 移除iOS默认的内置样式 */  
    -webkit-border-radius: 0; /* 移除iOS默认的圆角 */  
}  
  
/* 禁止长按图片和链接保存或复制 */  
img, a {  
    -webkit-touch-callout: none; /* 禁止长按链接呼出功能菜单 */  
}  
  
/* 响应式布局基础 */  
/* 可以根据需要添加媒体查询来适配不同屏幕尺寸 */  
  
/* 示例：设置字体大小随着视口大小变化 */  
html {  
    font-size: 16px; /* 基础字体大小 */  
}  
  
@media (max-width: 768px) {  
    html {  
        font-size: 14px; /* 在小屏幕上减小字体大小 */  
    }  
}  
  
@media (max-width: 480px) {  
    html {  
        font-size: 14px; /* 在更小屏幕上进一步减小字体大小 */  
    }  
}  
  
/* 其他自定义样式可以在这里添加 */