码迷,mamicode.com
首页 > Web开发 > 详细

总结自适应网站的标准尺寸

时间:2015-03-28 01:14:16      阅读:167      评论:0      收藏:0      [点我收藏+]

标签:响应式   前端   css3   

博主热衷各种互联网技术,常啰嗦,时常伴有强迫症,常更新,觉得文章对你有帮助的可以关注我。 转载请注明"深蓝的镰刀"


偶然翻阅国外标准模板,总结一下在使用css3的media query做自适应网站时究竟min-width和max-width设多少是最好的。


PC机时:

@media only screen and (min-width: 960px){*{color:red;}}

平板横放时:

@media only screen and (min-width: 768px) and (max-width: 959px){*{color:green;}}


手机横放以及平板竖放时:
@media only screen and (min-width: 480px) and (max-width: 767px){*{color:purple;}}

手机竖放时:

@media only screen and (max-width: 479px){*{color:orange;}}


自己总结了一下,尤其是最后一条队移动端的朋友特别有用,目前看了下iphone4的宽是320px,iphone6plus的宽是414px,华为mate7的宽稍微再宽一些,感觉479px就目前来看已经成为一个手机宽度的行业标准了,可以放心使用。

总结自适应网站的标准尺寸

标签:响应式   前端   css3   

原文地址:http://blog.csdn.net/hornedreaper1988/article/details/44688621

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!