Skip to content

Latest commit

 

History

History
30 lines (29 loc) · 1.5 KB

read01.md

File metadata and controls

30 lines (29 loc) · 1.5 KB

RESPONSIVE WEB DESIGN and FLOATS

Responsive web design

Responsive web design is building the website to work and be suuitable for every device. it is done by making a flexible layouts

Responsive web design consists of three parts:

  1. flexible layouts by building the layout with flexible grid
  2. media queries which is initialized by either @ media or @ import
  3. flexible media which is done by using max-width: 100% property and value

some types of media:

  • screen
  • tv
  • braille

when using logical operators will lead to left off media type. using the height and width for media features may lead to prefixed with min or max quualifiers as building the feature with min-width or max-width

Aspect ratio for media features:

it specifies the width/height pixel ratio of the targeted rendering area or output device

Viewport:

using the viewport meta tag with height or width will leads to define the property in a best layout depending on the device height and width

Float

float is a layout property added by CSS. it allows the content to flow around the targeted element after floating.

types of floating:

  1. left
  2. right
  3. none
  4. inhert

for clearing the next elments from float effect then, one of the next values is used after the property clear:

  • left
  • right
  • none
  • both

clearing is used to prevent strange layout caused by element floating. it prevent from collapsing