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

浏览数：40 / 时间：2015年06月09日

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

偶然翻阅国外标准模板，总结一下在使用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 响应式 前端 css3

相关文章

随机文章

您可能还喜欢

您可能还喜欢