CSS 项目目录结构规范 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';