Responsive Web Design Media Queries | Media query breakpoint
WhatisaMediaQuery?MediaqueryisaCSStechniqueintroducedinCSS3.Itusesthe@mediaruletoincludeablockofCSSpropertiesonlyifacertainconditionistrue.ExampleIfthebrowserwindowis600pxorsmaller,thebackgroundcolorwillbelightblue:@mediaonlyscreenand(max-width:600px){ body{ background-color:lightblue; }}TryitYourself»[1]AddaBreakpointEarlierinthistutorialwemadeawebpagewithrowsandcolumns,anditwasresponsive,butitdidnotlookgoodonasmallscreen.Mediaqueriescanhelpwiththat.Wecanaddabreakpointwherecertainpartsoft...
What is a Media Query?Media query is a CSS technique introduced in CSS3.
It uses the @media rule to include a block of CSS properties only if a certain condition is true.
ExampleIf the browser window is 600px or smaller, the background color will be lightblue:
@media only screen and (max-width: 600px) { body { background-color: lightblue; }}
Try it Yourself »[1] Add a BreakpointEarlier in this tutorial we made a web page with rows and columns, and it was responsive, but it did not look good on a small screen.
Media queries can help with that. We can add a breakpoint where certain parts of the design will behave differently on each side of the breakpoint.
Desktop PhoneUse a media query to add a breakpoint at 768px:
ExampleWhen the screen (browser window) gets smaller than 768px, each column should have a width of 100%:
/* For desktop: */.col-1 {width: 8.33%;}.col-2 {widt...