【CSS】设置移动端的CSS——响应式布局

响应式布局

出现背景：比如，篇幅很长的文章在手机端预览时，会出现很长的横向滚动条。
基本定义：为不同终端的用户提供更加舒适的界面和更好的用户体验。简而言之，就是一个网站能够兼容多个终端。
根本宗旨：写一次代码，跑在一万种设备上
核心思想：不就是设置宽度么？

实现方式：根据不同设备，设置不同CSS样式，设置该设备支持的页面宽（高）。

viewport

另外，在此之前，我们需要在head里设置一个meta标签，viewport，来设置移动端自适应

ViewPort详细信息，可参考此处：浅谈meta viewport

附上代码

Html：

	
		
		
		
		
		
		
		
		
	
	
		

			

			响应式布局
			基本定义：为不同终端的用户提供更加舒适的界面和更好的用户体验。简而言之，就是一个网站能够兼容多个终端。
			根本宗旨：写一次代码，跑在一万种设备上
			核心思想：不就是设置宽度么？
			
			实现方式：根据不同设备，引用不同CSS样式，设置支持的宽。
			
		
	

common.css：

body{
	font-style:italic ;
}
div{
color: Green;
}
p{
	padding: 5px;
}

mobile.css：

body{
	font-style:normal;
	color: red;
}
p{
	padding: 20px;
}

以上两种css代码只是做测试用：在浏览器中F12后，改变页面宽度，来看看效果。宽度分别大于500px：

小于500px：