使用@media screen and实现响应式web网页
2015-05-20 12:11:08  By: dwtedx

做web前端的攻城师都知道、经常要为不同分辨率设备或不同窗口大小下布局错位而头疼、现在很好咯、可以利用@media screen实现网页布局的自适应

但是怎样兼容所有主流设备就成了问题、到底分辨率是多少的时候设置呢?下面我分享一个自己在项目中使用的一套响应式的技巧、希望对大家有用

个人认为有几个临界点的分辨率、那么我们就可以轻松的来写自己的自适应代码了

480px以下

@media only screen and (max-width: 479px) {
    .head_title{
    	background: blue;
    }
    body {
		min-width: 320px;
		max-width: 479px;
		margin: 0 auto;
	}

}


480px到767px

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .head_title{
    	background: red;
    }
    body {
		min-width: 480x;
		max-width: 767px;
		margin: 0 auto;
	}

}


768px到959px

@media only screen and (min-width: 768px) and (max-width: 959px) {
     .head_title{
    	background: black;
    }
    body {
		min-width: 768x;
		max-width: 959px;
		margin: 0 auto;
	}

}


960px以上

@media only screen and (min-width: 960px) {
     .head_title{
    	background: green;
    }
    body {
		min-width: 960x;
		max-width: 1020px;
		margin: 0 auto;
	}

}


适配1200px上的屏幕、这个根据项目需要、可自行设定

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+