我们是否有响应式设计的标准尺寸。一般来说，我认为它的尺寸适合移动设备、平板电脑、iPad、笔记本电脑、台式机。但是现在我的客户遇到了很多问题，他们抱怨 4.5 英寸屏幕的设计不好，三星 Note 手机等的设计不好，这是我的错误吗？我们有标准尺寸来响应设计。以便我可以向我的客户解释。请提出建议。
【问题讨论】：
标签： css responsive-design
我总是从这个 mediaquery 模板开始：
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
【讨论】：
也许您可以考虑使用Restive Plugin。它旨在解决您为多种设备构建网站所面临的挑战。
您还可以查看 Getting Started with Restive Plugin 博客文章，其中介绍了如何在实际 Web 设计场景中使用它。
完全披露：我开发了插件。
【讨论】：
响应式设计没有真正的标准尺寸。最好的方法是为您的内容设计，而不是为设备设计。并设计移动优先。
通过移动优先，默认 CSS 将自动针对较小的屏幕，并从那里构建您对逐渐变大的屏幕所需的内容。
在开发方面，使用@min-width(insert px) 以移动优先的方式构建您的样式表。
【讨论】：
如果您使用 Bootstrap 则会出现问题，它将在所有移动设备和分辨率中自动调整。
转到此链接并下载引导程序，您将获得引导程序 css 和 js 文件，它将在您的应用程序或网络中运行。
http://getbootstrap.com/getting-started/#download
如果您需要任何帮助，使用它会正常工作，然后问我
谢谢
【讨论】：