css自学框架之容器

学习自己开发CSS框架，起步代码之容器部分代码：

html, body,dl, dt, dd, ol, ul,h1, h2, h3, h4, h5, h6,pre, code, form, p,fieldset, legend, figure{margin: 0; padding: 0;}
			*, *:before, *:after{ box-sizing: border-box } /*box-sizing: border-box就是将border和padding数值包含在width和height之内，这样的好处就是修改border和padding数值盒子的大小不变。*/
			:root{
			    --red: #fa4659;
			    --yellow: #ffb03a;
			    --blue: #3498db;
			    --green: #27a17e;				
				/* 容器 */
				--wrapper-width: 75em;
				--wrapper-padding: 1.25em;
				
				color: #353535;
				-webkit-text-size-adjust: 100%;
				-webkit-tap-highlight-color: transparent;
				font: 16px/1.5 'Microsoft Yahei', 'PingFang SC', 'Hiragino Sans GB', sans-serif;/*正常分辨率	基础字体大小 16px*/
			}			
			@media screen and (max-width: 500px){html.font-auto{ font-size: 14px }}/*小于 500px 时（移动设备）基础字体大小14px*/	
			@media screen and (min-width: 1921px){html.font-auto{ font-size: 18px }}/*大于 1930px 时（2K 屏幕）基础字体大小18px*/	
			/* 容器 */
			.mythBox{margin: 0 auto;padding: 0 var(--wrapper-padding);max-width: var(--wrapper-width);}
			.mythBox.min{ max-width: 50em }
			.mythBox.mid{ max-width: 65em }
			.mythBox.max{ max-width: 85em }
			.mythBox.full{ max-width: 100% }			
			.mythBox.thin{ padding: 0 .75em }
			.mythBox.thick{ padding: 0 1.5em }
			.mythBox.clear{	padding-left: 0;padding-right: 0;}		
			
			.font-s{ font-size: 14px }/*小字体*/
			.font-m{ font-size: 16px }/*正常字体*/
			.font-l{ font-size: 18px }/*大字体*/
			.bg-red{background-color: var(--red);}
			.bg-green{background-color: var(--green);}
			.bg-yellow{background-color: var(--yellow);}
			.bg-blue{background-color: var(--blue);}

HTML应用代码

		<div class="mythBox min bgred">最小宽度</div>
		<div class="mythBox mid bggreen">中间宽度</div>
		<div class="mythBox max bgyellow">最多宽度</div>
		<div class="mythBox full bgred">全屏宽度</div>
		<div class="mythBox mid thin bggreen">薄Padding</div>
		<div class="mythBox mid thick bgyellow">厚Padding</div>

最终效果：