CSS项目目录结构的最佳实践与规范解析

shenlan-ui (UI根目录)|--src (核心样式代码)| |--shenlan-ui.css (UI的主样式文件)| |--common.css (公共样式文件)| |--reset.css (CSS-Reset文件)| |--layout.css (组件文件：图标样式)| |--... (其他组件文件)||--demo (演示文件目录)|--layout.html (布局样式文件)|--... (其他组件的样式文件)

src/reset.css

/** @Author: xutao* @Date: 2019-04-12 10:06:29* @Last Modified by: xutao* @Last Modified time: 2019-04-29 16:37:40*//* 去掉所有元素的内外边距 */html, body, div, span,h1, h2, h3, h4, h5, h6, p, pre,a, img, ul, li, form, label, input,table, tbody, tfoot, thead, tr, th, td,audio, video {margin: 0;padding: 0;}/* 统一全局字体 */body {font-family: -apple-system-font,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei",Arial,sans-serif}/* 列表元素去掉默认的列表样式 */ol, ul {list-style: none;}/* Table元素的边框折叠 */table {border-collapse: collapse;border-spacing: 0;}/* 去掉默认的下划线 */a{text-decoration: none;}/* 去掉input自带的边缘效果和背景颜色 */input{outline: none;background: none;}

/src/common.css

1 区分屏幕宽度的方式

/* 屏幕宽度小于340px时的样式 */@media (max-width: 340px){ /* 样式1 */ }/* 屏幕宽度在340px至410px时的样式 */@media (min-width: 340px) and (max-width: 410px){ /* 样式2 */ }/* 屏幕宽度大于410px时的样式 */@media (min-width: 410px){ /* 样式3 */ }

精简样式:

/* 屏幕宽度在340px至410px时的样式 *//* 样式2 *//* 屏幕宽度小于340px时的样式 */@media (max-width: 340px){ /* 样式1 */ }/* 屏幕宽度大于410px时的样式 */@media (min-width: 410px){ /* 样式3 */ }

这样屏幕适配的框架就完成了

2 元素尺寸的指定

/* 屏幕宽度在340px至410px时，基准尺寸使用20px */html{font-size: 20px;}/* 屏幕宽度小于340px时，基准尺寸使用18px */@media (max-width: 340px){html{font-size: 18px;}}/* 屏幕宽度大于410px时，基准尺寸使用22px */@media (min-width: 410px){html{font-size: 22px;}}

3 按比例划分屏幕

最终common.css样式

/** @Author: xutao* @Date: 2019-06-20 22:16:01* @Last Modified by: xutao* @Last Modified time: 2019-06-20 23:03:17*//* 屏幕宽度在340px至410px时，基准尺寸使用20px */html{font-size: 20px;}/* 屏幕宽度小于340px时，基准尺寸使用18px */@media (max-width: 340px){html{font-size: 18px;}}/* 屏幕宽度大于410px时，基准尺寸使用22px */@media (min-width: 410px){html{font-size: 22px;}}

src/shenlan-ui.css

目前, 我们只有/src/reset.css和/src/common.css这两个文件, 所以集成的时候只需要把这两个文件引入即可。

/** @Author: xutao* @Date: 2019-06-20 23:08:44* @Last Modified by: xutao* @Last Modified time: 2019-06-20 23:08:44*//* css reset */@import './reset.css';/* 公共样式 */@import './common.css';