Jump to content
Sign in to follow this  
Xtra

Media Queries

Recommended Posts

I believe many web designers still have many confusion for the responsive design . Screen resolution? CSS3 Media Queries? Device width? Screen Sizes? And so on. The rapid development of web design and electronic devices in this years which must soon lead to increase an ever expanding workload. For a while you have to be compatible with the PC, Mobile, Android and IOS, and so on. However, the fact is true, the pure web interface design, we do not need to consider too complex response. Because the responsive design rely on front-end engineers.  But, we can not ignore this. If you are a team, you will be hacked by front-end developers.

Well, you can use Photoshop CC directly create a file with predefined document sizes of different devices, increased design accuracy.

Of course, if you do not use Photoshop, you can see the following tables.

Tablet and PC Monitor Display Sizes(Data by W3C, Jan 2017)

Screen Width Screen Minimal Height Statistics
768px (Tablet) 1024 px(Tablet)
Lower Lower 4.4.00%
1024 px 768 px 3.00%
1280 px 1024 px 5.00%
1280 px 800 px 4.00%
1366 px 768 px 35.00%
1920 px 1080 px 17.00%
2560 px and up 1440 px 31.60%

 

Smartphone Display Sizes(Data by DeviceAtlas, 2016)

Smartphone Screen Resolution
Nokia 230, Nokia 215, Samsung Xcover 550, LG G350 240 x 320
Alcatel pixi 3, LG Wine Smart 320 x 480
Samsung Galaxy J1 (2016), Samsung Z1, Samsung Z2, Lumia 435, Alcatel Pixi 4, LG Joy, ZTE Blade G 480 x 800
Huawei Y635, Nokia Lumia 635, Sony Xperia E3 480 x 854
Samsung Galaxy J2, Moto E 2nd Gen, Sony Xperia E4, HTC Desire 526 540 x 960
iPhone 4, iPhone 4S 640 x 960
iPhone 5, iPhone 5S, iPhone 5C, iPhone SE 640 x 1136
Samsung Galaxy J5, Samsung Galaxy J3, Moto G4 Play, Xiaomi Redmi 3, Moto G 3rd Gen, Sony Xperia M4 Aqua 720 x 1280
iPhone 6, iPhone 6S, iPhone 7 750 x 1334
iPhone 6S Plus, iPhone 6 Plus, iPhone 7 Plus, Huawei P9, Sony Xperia Z5, Samsung Galaxy A5, Samsung Galaxy A7, Samsung Galaxy S5, Samsung Galaxy A9, HTC One M9, Sony Xperia M5 1080 x 1920
Samsung Galaxy Note 5, Samsung Galaxy S6, Huawei Nexus 6P, LG G5 1440 x 2560
Sony Xperia Z5 Premium 2160 x 3840
General design values with Photoshop:
750 x 1334,1080 x 1920

 

Well, the core mind of this article came. Or the design is a small matter, the real thing is that front-end development how to make your design support the response which requires some various things. What I am paying attention to do:

  • Improve the responsive design efficiency with front-end developer.
  • Responsive web design breakpoints are an important aspect of the CSS declarations that allow for different layouts to appear at various screen sizes.
  • Try as short as possible for your code.

The following code is mine (The following breakpoints are mainly used for self-made Style Sheets when using (or not) the corresponding responsive front-end framework.):

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
/* 
 * The Standard Breakpoints. Working with fluid images.
*/
@media all and (max-width: 1690px) { ... }
@media all and (max-width: 1280px) { ... }
@media all and (max-width: 980px) { ... }
@media all and (max-width: 736px) { ... }
@media all and (max-width: 480px) { ... }
 
 
 
/*
 * The Standard Breakpoints. But possibly this is a slightly complicated situation.
*/
@media all and (min-width:1200px){ ... }
@media all and (min-width: 960px) and (max-width: 1199px) { ... }
@media all and (min-width: 768px) and (max-width: 959px) { ... }
@media all and (min-width: 480px) and (max-width: 767px){ ... }
@media all and (max-width: 599px) { ... }
@media all and (max-width: 479px) { ... }
 
 
/* 
 * The Standard Bootstrap 3.x Breakpoints
*/
@media all and (max-width991px) { ... }
@media all and (max-width768px) { ... }
@media all and (max-width480px) { ... }
 
 
/* 
 * The Standard Bootstrap 4.x Breakpoints
*/
@media all and (max-width1199px) { ... }
@media all and (max-width991px) { ... }
@media all and (max-width768px) { ... }
@media all and (max-width575px) { ... }
 
/*   
* The Material Design Lite (MDL) Breakpoints
*/
@media all and (max-width1024px) { ... }
@media all and (max-width839px) { ... }
@media all and (max-width480px) { ... }
 
 
/* 
 * Retina Breakpoints(@2x)
*/
@media(-webkit-min-device-pixel-ratio:1.5),(min--moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:3/2),(min-resolution:1.5dppx){ ... }


You should take some time to ask yourself should I use a responsive framework for my site. I hope this article is helpful to you :)

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×