踩坑之修改前端模板的手机适配

在网上扒了一个前端模板，模改成了自己的，拿来急用。然而放在服务器上后用手机打开的效果，真的极差。于是开始各种模改，参透了media最简单的使用方法。

@media (max-width:480px) {
		p {
				//此处输入相应css
		}
}

在@media外不论是否添加p的css，在屏幕宽度小于480的文档中

都会用到上面的css。
在一个前端网页里一般会有很多个这样的@media，一般的从上到下的顺序是px有大到小。否则，浏览器展示的就会是后面符合文档宽度的css。而不会选择更加贴近文档的宽度。

当然除了宽度，还可以适配height

@media (max-height: 570px) and (min-height: 560px){
		div{
				//此处输入css	
		}
		//这个是指高度最小560px到最大570px的屏幕适配。
}

简单也只能写这么多。还有很多其他知识，欢迎大佬前来补充交流。