Responsive Web Design Made Simple CSS @media Rule Tutorial

Learn the CSS @media rule and the easiest way to make a responsive and mobile-friendly website layout. @media – https://www.developphp.com/lib/CSS/media Lesson Code … Related posts: Responsive Web Design Tutorial – 6 – Media Queries Responsive Website Design Tutorial: Using Media Queries Responsive Web Design Tutorial – 9 – Bottom Menu CSS Responsive Web Design Tutorial […]


Learn the CSS @media rule and the easiest way to make a responsive and mobile-friendly website layout. @media – https://www.developphp.com/lib/CSS/media Lesson Code …

Related posts:

  1. Responsive Web Design Tutorial – 6 – Media Queries
  2. Responsive Website Design Tutorial: Using Media Queries
  3. Responsive Web Design Tutorial – 9 – Bottom Menu CSS
  4. Responsive Web Design Tutorial – 8 – Creating a Core Template
  5. Responsive Web Design Tutorial – 10 – Bottom Menu HTML

Popular Posts


25 Responses

Really good but I wish there was there was some kinda chronological order
these tutorials…

04.24.15
04.24.15

you can simulate the ‘device-max-width’ in Chrome by clicking on mobile on
“inspecting element” and choosing right resolutions and proper device!

04.24.15
04.24.15

pfffft…tight pants are cool, whatchutalkinabout

04.24.15

Thanks Adam

04.24.15

In this example you could just put a max-width:98% to the container, except
this tutorial is about media queries, not width. I think to reduce
navigation interfaces is a better example of use.

04.24.15

WTF are some kind of a psychic? Last night I was hoping for you to create a
tutorial about responsive web in a easier way and now you made one. Haha!
Thanks for this sir adam..

04.24.15

when you make a @media rule do you have to keep every thin inside the {}
or do you have to make a new one every time ?
(sorry if it donen’t make sence :) 

04.24.15

On tip 2, I would suggest to not use links. Go with buttons if you can.

04.24.15

I always did the mobile detection with javascript, this is much better! No
javascript and css combining! Realy thanks!

04.24.15

I got trolled by tip #4….

04.24.15

Dude, you are my god!
I’m just saying
Thanks a lot! !
May your name be exalted!
Amen
-.-

04.24.15

very good!

04.24.15

Happy 700th video

04.24.15

About the responsive i Always rather to create mobile-first interfaces
because in My opinion it is better as you don’t have to adapt the style For
every resolution , you just create one interface that Works Great For every
device , btw For a responsive css i recommend to take in consideration the
vh and vw to determine the height and width of a container and also the
calc() function of css which is a really helpful feature even if it isn’t
fully supported in old browsers so it is better to have a fallback in
percentage or vw/h

04.24.15

Use Bootsrap for Responsive Design and put this on your meta data:

—JUST AN ADVICE—

DO NOT ARGUE WITH ME :) 

04.24.15
04.24.15

Thanks Adam

04.24.15

Very important. Each HTML document must have the following line of code for
media ownership to take effect for each resolution in hand, otherwise it
will not work, you declare all styles insidemedia peroprietatii nothing.



All advanced functionality of CSS works for my just using class… is that
possible?

04.24.15

Thank you Adam.

04.24.15

“I’m gonna show you a easy way to make responsive website… we’re going to
use the [idiot/noob] program called WordPress ! Just follow me step by step
with no step skipped!” Omg.. I laugh at those people so much!!!! Not trying
them look dumb… But seriously… Would it hurt to learn HTML/CSS/JS/PHP 

Leave Your Response

* Name, Email, Comment are Required