7档自动css

7档自动css是指一个自适应的css系统，它通过使用不同的css媒体查询和设置不同的css属性值，确保网站在不同的屏幕尺寸和设备上都能够完美展现。

/*定义主要颜色*/
:root {
 --primary-color: #007bff; 
}

/*页面字体设置*/
html {
 font-size: 16px;
}

/*小屏幕样式*/
@media (max-width: 576px) {
 body {
   font-size: 14px;
 }
}

/*中等屏幕样式*/
@media (min-width: 577px) and (max-width: 768px) {
 body {
   font-size: 16px;
 }
}

/*大屏幕样式*/
@media (min-width: 769px) and (max-width: 992px) {
 body {
   font-size: 18px;
 }
}

/*超大屏幕样式*/
@media (min-width: 993px) and (max-width: 1200px) {
 body {
   font-size: 20px;
 }
}

/*极大屏幕样式*/
@media (min-width: 1201px) {
 body {
   font-size: 24px;
 }
}

除了字体大小的设置，7档自动css还可以设置所有的css样式属性，如颜色、边框、背景、布局等等。这些样式属性可以通过媒体查询的配合，让网站在不同的屏幕尺寸上呈现出不同的形态。这种自动适应的css系统能够有效地提高网站的用户体验，让网站更具有响应式。