CODEWITHSUNDEEP
css
Aditya Kumar
Aditya Kumar

Reputation: 173

responsive design for websites using css

I am writting css for some websites which must be responsive. I am new to css and dont know much of the responsive techniques. I have divided my css code into three parts.

  1. Desktop : all universal styles
  2. Tablets : @media (min-width:768px) and (max-width:991px) { my styles }
  3. Mobiles : @media (min-width:320px) and (max-width:480px) { my styles }

Will it be fully responsive and support All standard devices or do i have to make few more changes? Here ALL means literally all devices.

Upvotes: 2

Views: 128

Answers (3)

vanntile
vanntile

Reputation: 2787

You have to not leave spaces between 481 and 766 and between 0 to 319 px. That is not really responsive.

@media screen and (max-device-width:480px){ // styles for mobile}
@media screen and (max-device-width:780px){ // styles for tablets}
@media screen and (min-device-width:781px){ // styles for desktop}

EDIT There are wearables lower than 319 px. Example:

/* ----------- Moto 360 Watch ----------- */
@media 
  (max-device-width: 218px)
  and (max-device-height: 281px) { 

}

There should be there some devices between 481 and 766.

Upvotes: 0

designarti
designarti

Reputation: 629

What almost everyone got wrong is that responsive design should be done based on some predefined breakpoints. It should define your content, not your visitor's screen. If there are 10 breakpoints, there is something definitely wrong with the site structure. Less media queries = better. Start from there and conclude the perfect structure for your content for ANY screen.

Upvotes: 1

Muhammet
Muhammet

Reputation: 3308

If you think responsive's simple, I feel bad for you son. We got 99 viewports, but the iPhone's just one.

Here is the list of Media Queries for Standard Devices

Upvotes: 3

Related Questions