html+css响应式布局

对于小业务，需要自适应的相应式布局，如果引用bootstrap一样的框架，将会非常笨重，于是手写一个

css

/*自写栅格 start*/
body {
    font-family: Helvetica,Arial,"Helvetica Neue","Droid Sans","Heiti SC","Microsoft YaHei",sans-serif;
    margin:0;
}

* {
    box-sizing: border-box;
}

.row:after {
    content: "";
    clear: both;
    display: block;
}

[class*="col-"] {
    float: left;
    padding: 10px;
}

.col-1 {
	width: 8.33%;
}
.col-2 {
	width: 16.66%;
}
.col-3 {
	width: 25%;
}
.col-4 {
	width: 33.33%;
}
.col-5 {
	width: 41.66%;
}
.col-6 {
	width: 50%;
}
.col-7 {
	width: 58.33%;
}
.col-8 {
	width: 66.66%;
}
.col-9 {
	width: 75%;
}
.col-10 {
	width: 83.33%;
}
.col-11 {
	width: 91.66%;
}
.col-12 {
	width: 100%;
}

/*自写栅格 end*/

/*less 变量 start*/
@normal_font_size: 20px;
@title_color: #6495ED;
/*less 变量 end*/

/*常用文字位置 start*/
.text_center {
	text-align: center;
}
.text_right {
	text-align: right;
}
.text_left {
	text-align: left;
}
/*常用文字位置 end*/

/*常用margin start*/
.margin_top {
	margin-top: @normal_font_size;
}
/*常用margin end*/

.title {
	font-size: @normal_font_size;
	box-shadow: 0 0 3px #000;
}

.title_left {
	background-color: @title_color;
	color: white;
}

.title_right {
	color: @title_color;
}

.airport_en {
	font-size: @normal_font_size;
}

.time {
	font-size: @normal_font_size;
}

.img_center{
	width: 100%;
}

.ticket_detail{
	box-shadow: 0 0 3px #000;
}

html

机票详情

 

	

		

			
计划
		
		

				
东方航空
				
CA12345
		
	
	

		

			

				

					PEK
				
				

					北京首都T3
				

				

					计划起飞
				
				

					17:10
				
			
			

				
			
			

				

					CAN
				
				

					广州白云A
				

				

					计划达到
				
				

					20:10
				
			
		
		

			

				

					值机柜台
				
				

					A
				
			
			

				

					登机口
				
				

					A18
				
			
			

				

					行李转盘
				
				

					--
				
			
		
	

	

		行程助手航班信息由非常准提供
	


 

重点看布局css,哈哈，随带示例用了下less语法