如何使用css3实现样式适配pc、平板和手机端，并让样式随着屏幕大小的变化而变化呢？

许多小哥哥小姐姐在写前端的时候特别懊恼，在我的电脑上样式明明很漂亮，但是稍微换个小屏幕电脑或者手机端查看，惨不忍睹。怎么解决呢？

好了，在看代码之前，让我们先来理理思路，理清了思路，实现起来就不难了。

我们来定义样式，在宽度大于1200px的时候是什么a样式，在屏幕小于750px时是b样式，在屏幕小于414时（一般等于或小于414就是手机端了）是c样式，到这来有的童鞋说: 那我这不是很麻烦，要写那么多次？或者：直接js判断屏幕大小不就可以啦！好吧。。
麻烦?只有不写代码才不麻烦
js判断？两句css3代码实现的效果，为啥还要去写js

说不过了，上图

这是我屏幕大于1200px时的效果

这是我屏幕小于750px时(一般是平板)的效果

这是我屏幕小于414px时(一般是手机)的效果

到这里是不是看明白了，怎么写了，其实也要不了几行代码，改定位的定位，改距离的距离。

/*最大屏幕的，直接宽度100%*/
<style>
	.Data_Company{
	      width: 100%;
	      margin: 0 auto;
	}
	/*屏幕小于1200px时*/
	@media only screen and (max-width: 1200px){
		.Data_Company{
	        width: 80%;
	        margin: 0 auto;
	    }
	}
	/*屏幕小于750px时*/
	@media only screen and (max-width: 750px){
		.Data_Company{
	        width: 50%;
	        margin: 0 auto;
	    }
	}
	/*屏幕小于414px时*/
	@media only screen and (max-width: 414px){
		.Data_Company{
	        width: 100%;
	        padding:0px 20px;
	    }
	}
</style>

看明白了吧，我上面效果图的样式是less写的，考虑到新手的感受，我没有直接上源码，只提供了上图的代码作为参考，不过其实less也就是css,简单点理解就是嵌套式的css，想学习了解的去度个娘，她会告诉你。嘎嘎。。。

本篇文章为原创制作，如有抄袭或者使用文字转发的请注明来源，感谢。