响应式设计 [英] Responsive Design

问题描述

我们有响应式设计的标准尺寸吗?一般来说，我认为它是适合手机、平板电脑、iPad、笔记本电脑、台式机的尺寸.但是现在我和我的客户遇到了很多问题，他们抱怨 4.5" 屏幕的设计不好，三星 note mobile 等的设计不好，这是我的错误吗?我们是否有响应的标准尺寸设计.这样我就可以向我的客户解释.请提出建议.

Do we have standard sizes for responsive design. Generally I thought it would be a size for mobile, tablet, iPad, laptop, desktop. But now I'm getting into so many problems with my clients they are complaining that the design is not good in 4.5" screen and design is not good in Samsung note mobile etc., Is this my mistake? Do we have standard sizes for responsive design.So that I can explain that to my clients. Please suggest.

推荐答案

我总是从这个 mediaquery 模板开始:

I'm always starting with this mediaquery template:

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

这篇关于响应式设计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！