Responsive design-device width resolution

Http://blog.csdn.net/ SQL _wtx/article/details/8823272

In response to the design plan, you need to know the size of different devices. For example, iPhone 4S is 480px in width and 320px in length; ipad2 is 1024px in width and 768px in length. The following is an article translated to describe the screen resolution in detail. I am not good at English. Please refer to the official website for more bricks and suggestions. Http://www.metaltoad.com/blog/simple-device-diagram-responsive-design-planning. Article name: A simple device dimo-for responsive design planning

 

Simple Device diagram in response to the design scheme

In metal toad (the author's blog), we are all fans of the response design, but in the response planning process, it is generally difficult to choose the size of the device to design. Just yesterday, we were still discussing whether the best design for the website was 3 layout or 4 layout. I will give my opinion later. The important difference between each layout is in two aspects: What is the pixel width range of a special layout; on PSDs, the designer will establish the pixel width. The number of devices is constantly increasing, and the response design needs to take into account different screen resolutions. Therefore, we have pieced together a simple illustration to list the most common device width and possible device width ranges.

This is the result! You can also download the PSD format and update new devices or experiment response designs in the future.

Note the following:

• The label indicates that the top and bottom of the image are the orientation of the portrait screen of the device. We believe that we need to create a more intuitive illustration of the height and width, but in response design we are most concerned with the width, so it is most meaningful to express the width on the same axis.
• IPhone and iPad (these two devices are the most often used as response design objects) are respectively listing 320px x 480px and 768px x 1024px. In terms of development, even if the iPhone 4/4S and "the new iPad"'s new Retina display is more than twice the pixels in the horizontal and vertical directions, it is still how to present the device's response layout.

Recommended Layout

3 Layout

3 layout makes things a little tricky, because our traditional idea is to design a mobile phone portrait screen, landscape screen, flat portrait screen and landscape screen. The simplest solution is to adapt to the resolution of the portrait screen of the mobile machine and the flat panel:

 

• 0-519 pixels: In portrait mode, the vast majority of mobile phones will be in a narrow screen layout, and the flild-with layout can be used to adapt to the screen width requirements. The iPhone landscape will still see the narrow screen design.
• 520-959 pixels: some new large screen and high-resolution Android phones will see the center layout in portrait mode. The kindle file, iPad, and most tablets are the same. This layout is also applied to most Android phones in Landscape mode.
• 960 + pixels: new big screen phones, Kindle Fire, iPad and most Android tablets will see the full width layout. This layout is also available on the desktop.

Design goals:

• Layout 1: In portrait mode, iPhone (320 x 640px) is ideal. Because it is often a fluid width layout, you can increase or decrease the width to adapt to other devices
• Layout 2: iPad (768 x 1536px) is a good choice. This layout can be expanded to other devices that are suitable for this layout.
• Layout 3: desktop full width (960px), fixed width background is very suitable for this layout.

4 Layout

Four la s are applied in metaltoad.com. Although new devices have emerged in the last year, we still like to use the 4 Layout Method on our website:

• 0-519px: similar to 3 la s, most mobile phones use narrow screen la s in portrait mode.
• 520-759px: the layout is different from that of 3, which is further subdivided. This layout will apply to mobile phones with high resolution and tablets with small resolution in the portrait direction.
• 760-959px: the layout of the iPad and most Android tablets is like this in portrait mode, or the layout of most adnriod mobile phones is like this in Landscape mode. (Andriod is generally large)
• 960 + px: the layout is the same as that of 3. It is mainly applicable to the desktop browser, horizontal screen of iPad, and adnriod tablet.

Design goals:

• Layout 1: It is mainly for the iPhone's portrait screen, which is the same as the layout 3.
• Layout 2: mainly for the PX Kindle Fire.
• Layout 3: iPad (768 x 1536px) is a good choice. This layout can be expanded to other devices that are suitable for this layout.
• Layout 4: mainly for the desktop, and the layout is the same as that of 3.

6 Layout

6. If you have enough budget, try:

Note: We generally cannot use this. If you are interested, you can read the original text. I will not translate it.

Responsive design-device width resolution