响应式网站设计的尺寸

时间:2013-08-25 18:58:49

标签: css css3 responsive-design media-queries viewport

我想设计一个网站。但请告诉我我可以用于响应式网站设计的尺寸。 尺寸必须包含移动设备,平板电脑,个人电脑和其他设备..

我想在媒体查询中使用它们:D

EX for Mobile:

    @media only screen and (min-width: 500px) {

    } 

平板电脑的EX:

    @media only screen and (min-width: 800px) {

    } 

为我提供一些有关响应式网站设计的资源以及我可用于响应式网站设计的尺寸..:D

就像我想知道我可以使用的这些设备的实数大小。 :d

2 个答案:

答案 0 :(得分:0)

/* #1- Desktops */
@media (min-width: 980px) { ... }

/* #2- Portrait tablet to landscape and netbooks */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* #3- Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* #4- Landscape phones and down */
@media (max-width: 480px) { ... }

有关实际的设备规格,请查看this link by CSS-tricks ..

答案 1 :(得分:0)

以下是媒体断点的完整列表

ITEM_PIPELINES = {
     'test.pipelines.S3FileUpload': 1
}

查看有关响应式设备尺寸的更多信息:Medium

我希望如此有用。