Question

我们是否有响应式设计的标准尺寸。一般来说，我认为它适用于手机，平板电脑，iPad，笔记本电脑，台式机。但是现在我遇到了很多问题，我的客户抱怨说4.5英寸屏幕设计并不好，三星笔记本设计不好等，这是我的错吗？我们有标准尺寸的响应所以我可以向客户解释一下。请建议。

Answer 1

我总是从这个媒体查询模板开始：

/* 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 */
}

Answer 2

也许您可以考虑使用Restive Plugin。它旨在通过为多个设备构建网站来解决您的挑战。

您还可以查看Getting Started with Restive Plugin博文，其中介绍了如何在现实网页设计方案中使用它。

完全披露：我开发了插件。

Answer 3

响应式设计没有真正的标准尺寸。最好的方法是为您的内容而不是设备进行设计。并设计移动优先。

通过移动优先，默认的CSS将自动定位到较小的屏幕，并从那里构建逐步扩大屏幕所需的内容。

开发方面，使用@min-width(insert px)以移动优先的方式构建样式表。

Answer 4

如果您使用Bootstrap，则会出现问题，它将在所有移动设备和分辨率中自动调整。

转到此链接并下载bootstrap，您将获得bootstrap css和js文件，它将在您的应用或网络中运行。

http://getbootstrap.com/getting-started/#download

使用它，如果您需要任何帮助，它会正常工作，然后问我

由于

响应式设计

4 个答案: