当您进行响应式设计编码时,智能手机和平板电脑的标准宽度是多少。我查看了不同的网站,但似乎没有找到任何好的标准宽度模板。你们在编码响应式设计时通常对断点/媒体查询做什么?
如果有人有适合平板电脑/智能手机等的不同分辨率的好模板,请分享!谢谢!
有两种思考 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){...}
如果您确实想了解细节并利用视网膜显示屏,则必须考虑像素比。看看这个多余的 css 样式表:媒体查询-boilerplate.css http://dev.bowdenweb.com/a/css/media-queries-boilerplate.css。视网膜显示屏的好处之一就是为客户提供更高质量的图像。缺点是它需要更多带宽并使网站速度变慢。
我希望这对你有帮助。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)