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, 2022 in CSS by Edureka
• 13,620 points
1,157 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 Aug 8, 2022 by Tanishqa
• 1,170 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, 2022 in CSS by Edureka
• 13,620 points
549 views
0 votes
1 answer

Break long word with CSS

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

answered Jun 10, 2022 in CSS by Edureka
• 12,690 points
367 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, 2022 in CSS by Edureka
• 13,620 points
399 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,880 points
992 views
0 votes
0 answers

Responsive design with media query : screen size?

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

Aug 12, 2022 in CSS by Edureka
• 13,620 points
574 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, 2022 in Others by Soham
• 9,710 points
4,476 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, 2022 in Others by narikkadan
• 63,680 points
714 views
0 votes
1 answer

How to use CSS media query to scale background-image to viewing window

If you only want the desktop version ...READ MORE

answered Jun 17, 2022 in CSS by Edureka
• 12,690 points
1,288 views
0 votes
1 answer

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

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

answered Aug 3, 2022 in CSS by Tanishqa
• 1,170 points
772 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, 2022 in CSS by Tanishqa
• 1,170 points
1,333 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP