@charset "utf-8"; /* CSS Document */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form, fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; } table { border-collapse:collapse; /*让表格边框细线*/ border-spacing:0; /*清除边框间距*/ } fieldset,img { border:0 none; /*有些浏览器默认这些标签有边框,所以要清除默认边框*/ display:block; } address,caption,cite,code,dfn,em,i,u,b,strong,th,var { font-style:normal; font-weight:normal; /*清除标签默认文本样式和加粗*/ } input,textarea{ outline:0 none;/*去掉文本框的默认轮廓线*/ } ol,ul { list-style:none; /*清除列表默认样式*/ } caption,th { text-align:left; /*清除标签默认文本居中对齐*/ } h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; /*清除标题标签的默认样式*/ } a{ text-decoration:none;/*大部分页面中的链接没有下划线*/ } .clearfix:after{ height:0; content:" "; display:block; overflow:hidden; clear:both; } .clearfix{ zoom:1;/*IE低版本浏览器不支持after伪类所以要加这一句*/ } /*控制第一层容器都是撑满全屏*/ html,body{ height: 100%; width: 100%; } #app{ height: 100%; } #app > :nth-child(1){ height: 100%; } html{ min-width: 380px; } /*媒体查询*/ /*@media only screen{*/ /*!*里面是查询浏览器的宽度,达到要求就执行这里的样式*!*/ /*!*给窗体一个最小宽度*!*/ /*html{*/ /*min-width: 768px;*/ /*}*/ /*}*/ /* 超小屏幕(手机,小于 768px) */ @media screen and (max-width: 768px) { body{ /*为什么要加important那?因为用了第三方的antd的样式库,antd的body里面设置的字体样式优先级比我们的高*/ font-family: '微软雅黑' !important; /*font-family: '宋体' !important;*/ font-size: 16px !important; } } /* 小屏幕(平板,大于等于 768px) */ @media screen and (min-width: 769px) and (max-width: 992px) { body{ font-family: '微软雅黑' !important; /*font-family: '宋体' !important;*/ font-size: 18px !important; } } /* 中等屏幕(桌面显示器,大于等于 992px) */ @media screen and (min-width: 993px) and (max-width: 1200px) { body{ /*font-family: '微软雅黑' !important;*/ font-family: '宋体' !important; font-size: 20px !important; } } /* 大屏幕(大桌面显示器,大于等于 1200px) */ @media screen and (min-width: 1201px) { body{ /*font-family: '微软雅黑' !important;*/ font-family: '宋体' !important; font-size: 24px !important; } }