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

 转载字自"深蓝的镰刀"


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


PC机时:

[css]  view plain copy
  1. @media only screen and (min-width960px){*{color:red;}}  

平板横放时:

[css]  view plain copy
  1. @media only screen and (min-width768px) and (max-width959px){*{color:green;}}  


手机横放以及平板竖放时:
[css]  view plain copy
  1. @media only screen and (min-width480px) and (max-width767px){*{color:purple;}}  

手机竖放时:

[css]  view plain copy
  1. @media only screen and (max-width479px){*{color:orange;}}  


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

你可能感兴趣的:(web前端)