close[x]


CSS

CSS-Home CSS-Environment CSS-Basic syntax CSS-Selector CSS-How To Add CSS CSS-Comment CSS-Color CSS-Background CSS-Font CSS-Text CSS-Boarder CSS-Margin CSS-Padding CSS-Height/Width CSS-Link CSS-Table CSS-Visibility CSS-Scrollable CSS-Float/Clear CSS-Line CSS-Align CSS-Dimension CSS-Event CSS-Pusedo class CSS-Position CSS-Transparency CSS-Dropdown CSS-Form CSS-List/Counter CSS-Website layout CSS-Text effect CSS-Image effect CSS-Button effect CSS-page number CSS-Box CSS-@media CSS-Multi device CSS-Multi device 1 CSS-Multi device 2



learncodehere.com




CSS - Responsive Web Design (RWD)

Responsive web design provide an optimql experience, easy navigation on resizing device such as deshtop, mobile and tablets.

Responsive web design make webpage to look good in all device type.

Responsive web design apply when you resize, hide, shrink, enlarge, move ro be look in all device types.


responsive web


RWD - The Viewport

The viewport is the user's visible area of a web page.

The viewport of all devices are not the same.

For example, the viewport of mobile is smaller than computers and tablets.

You can control the viewport of your web using <meat> tag.


Syntax : viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

You should include this syntax in you HTML code.

These <meat> tag and its property gives instruction to browser how to control to wep page.

  • width=device-width : sets the width of the page to follow the screen-width of the device.
  • initial-scale=1.0 : sets the initial zoom level when the page is first loaded by the browser.

  • Note

    Users are used to scroll a website vertically on all devices. So your website should follow these concepts to apply in you website design.