# Media Queries ## Responsive Design --- ## Why Use Media Queries Media queries allow you to develop designs for all devices. Which give you a solution to adjust content for screen size and orientation - Phones - Tablets - Gaming Console Display - laptops - desktops --- ## Media Types Media type describe the general category of the device ```htmlembedded= <ul> <li>all</li> <!-- default suitable for all devices--> <li>screen</li> <!-- Most common - used for screened devices--> <li>speech</li> <!-- screen readers --> <li>print</li> <!--page docs --> </ul> ``` --- ## Syntax ```css= @media only screen and (max-width: 720px) { /* insert styles */ } ``` --- ## Mobile First Design ### What's the idea? --- ## Example ```htmlembedded= <!--html--> <div> <div class ="square1"></div> </div> ``` --- # CSS Position --- ## Position Property The position property is used to move and manipulate elments across the browser window and docuemnt flow ```css= /* postions properties */ -position static relative absolute fixed sticky -top -right -bottom -left ``` ___ ## Static The static value positions elements in the standard document flow, top-down and left-to-right. (left, Right, etc.. dont take affect when the position is static) --- ## Static The static value positions elements in the standard document flow, top-down and left-to-right. (left, Right, etc.. dont take affect when the position is static) --- ## Relative The relative value positions elements relative to its expected default static position. --- ## Absolute The absolute value positions elements separate from the entire document flow and is positioned against the first non-statically positioned ancestor element. --- ## Fixed The fixed value positions elements similar to absolute positioning except it will always stay fixed to the browser window in the set position. --- ## Sticky The sticky value positions elements off of the scroll position of the user. (Elements switch between relative and fixed) --- ## Example ```css= .class { position: ?; width: 350px; height: 125px; border-style: solid; border-color: black; } ``` ```htmlembedded= <div class="parent"> <div class="child"></div> </div> ```