前端- RWD

前端- RWD

Responsive Web Design

Screen Shot 2020-11-30 at 1.33.47 PM

Users are used to scroll websites vertically on both desktop and mobile devices - but not horizontally!

view port

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

html5

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

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

---

media query

Always Design for Mobile First!

uses the @media rule to include a block of CSS properties only if a certain condition is true.

eg If the browser window is 600px or smaller, the background color will be lightblue:

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

break point

@media only screen and (min-width: 600px) {
...
}
@media only screen and (min-width: 768px) {
...
}

typical breakpoints

 /* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...} 

Orientation

The web page will have a lightblue background if the orientation is in landscape mode:

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

framework

eg bootstrap

it uses HTML, CSS and jQuery to make responsive web pages.