当您编写响应式设计代码时,智能手机和平板电脑的标准宽度是多少?我查看了不同的网站,但我似乎没有找到任何标准宽度的好模板.在编写响应式设计时,你们通常会为断点/媒体查询做些什么?
如果有人有平板/智能手机等不同结果的好模板,请分享!谢谢!
您可以通过两种方式思考CSS媒体查询.
首先是"桌面优先".这意味着您的基本CSS将瞄准大屏幕,然后您的媒体查询将覆盖您的类以适应较小的类.你的CSS可能是这样的:
/* Large screens ----------- */ /*some CSS*/ /* Desktops and laptops ----------- */ @media only screen and (max-width : 1824px) {...} /* iPads (landscape) ----------- */ @media only screen and (max-width : 1224px) {...} /* iPads (portrait) ----------- */ @media only screen and (max-width : 1024px) {...} /* Smartphones (landscape) ----------- */ @media only screen and (max-width : 768px) {...} /* Big smartphones (portrait) (ie: Galaxy 3 has 360)*/ @media only screen and (max-width : 640px) {...} /* Smartphones (portrait) (ie: Galaxy 1) */ @media only screen and (max-width : 321px) {...}
第二种方法是"移动优先".这意味着您的基本CSS将针对像iPhone 4这样的小屏幕.然后您的媒体查询将覆盖您的类以适应更大的屏幕.这是和例子:
/* Smartphones (portrait) ----------- */ /* Ipad2 (portrait) ----------- */ @media only screen and (min-width : 768px){...} /* Ipad2 (paysage) ----------- */ @media only screen and (min-width : 1024px){...} /* Ordi (Petit) ----------- */ @media only screen and (min-width : 1224px){...} /* Desktops and laptops ----------- */ @media only screen and (min-width : 1824px){...}
如果你真的想进入细节并利用视网膜显示器,你将不得不使用像素比率.看看这个overkill css样式表:media-queries-boilerplate.css.视网膜显示器的一个好处是为客户提供更高质量的图像.它的缺点是需要更多的带宽并使网站变慢.
我希望这对你有帮助.