Common CSS Media Queries Break Points

0 votes

Working with CSS Media Queries, my website is responsive.

Is the arrangement for devices below a good one? a phone, an iPad (landscape or portrait), a desktop computer, and a laptop?

What are the typical breakpoint values for media queries?

I am planning to use the following breakpoints:

  • 320: Smartphone Portrait
  • 481: Smartphone Landscape
  • 641 or 768 ???: IPad Portrait ???
  • 961: IPad Landscape / Small Laptop ???
  • 1025: Desktop and Laptop
  • 1281: Wide Screen

What do you think? I have a few doubts as ??? points.

Aug 4 in CSS by Edureka
• 9,940 points
10 views

1 answer to this question.

0 votes

We don't need to define separate CSS media query breakpoints for each device width.
 Breakpoints Should You Use:

  • 320px — 480px: Mobile devices.
  • 481px — 768px: iPads, Tablets.
  • 769px — 1024px: Small screens, laptops.
  • 1025px — 1200px: Desktops, large screens.
  • 1201px and more — Extra large screens, TV.
answered 6 days ago by Tanishqa
• 700 points

Related Questions In CSS

0 votes
0 answers

CSS media queries ( media screen )

The queries I have on my WordPress ...READ MORE

Jun 30 in CSS by Edureka
• 9,940 points
9 views
0 votes
1 answer

Break long word with CSS

What you need is word-wrap: break-word;, which ...READ MORE

answered Jun 10 in CSS by Edureka
• 9,540 points
20 views
0 votes
0 answers

How to line-break from css, without using <br />?

How to achieve the same output without <br>? <p>hello ...READ MORE

Jul 22 in CSS by Edureka
• 9,940 points
10 views
0 votes
1 answer

What is css Combinator?

hey @kartik, A combinator is something that explains ...READ MORE

answered Feb 4, 2020 in CSS by Niroj
• 82,740 points
338 views
0 votes
0 answers

Responsive design with media query : screen size?

I'm utilising media queries to create a ...READ MORE

2 days ago in CSS by Edureka
• 9,940 points
8 views
0 votes
1 answer

Media Queries: How to target desktop, tablet, and mobile?

I would personally believe that these are ...READ MORE

answered Feb 11 in Others by Soham
• 8,740 points
692 views
0 votes
0 answers

@Media min-width & max-width

I have this @media setup: HTML: <head> <meta name="viewport" content="width=device-width, ...READ MORE

May 7 in Others by narikkadan
• 11,280 points
69 views
0 votes
1 answer
0 votes
1 answer

What is the meaning of "cascading' in CSS??

Cascading simply implies that it may be ...READ MORE

answered Aug 3 in CSS by Tanishqa
• 700 points
14 views
0 votes
1 answer

Vertical and horizontal align (middle and center) with CSS?

There are many methods : Center horizontal and ...READ MORE

answered Aug 3 in CSS by Tanishqa
• 700 points
17 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP