Do responsive site pre-required knowledge points-1 pre-preparation

Media Enquiry

1. Media type

{    body {        background-color:lightblue;    } }

One of the words behind media is the medium type

All media types (default, can not be written), screen screens, these two are the most commonly used.

2. Logical operators

The media query means that the logical expression behind this is true, and the CSS inside is working.

Intermediate and is a logical operator

And both are true.

The OR or comma has a true true

The valid range of not non-not is not the comma (screen and man-width=800px), min-width=480px. After the comma you also use not to write not

Only old browsers do not support media queries when used, old browsers do not support media queries,

Media=screen Old Browser as true, no matter what you write behind, is true, and then your style is messy.

Media=only Old Browser is considered false, the style of media query will not confuse the basic style

3. CSS Media Properties

Width viewport width

Height viewport Height

Device-width Device Width

Device-height Equipment High

Orientation Equipment horizontal Screen Vertical screen

Resolution screen resolution

Aspect-ratio width to height ratio

Color number of digits

The above is the most commonly used several, the front can be added max-,min-.

4. Viewport viewport

Layouts viewport layout, visual viewport visual, ideal viewport ideal.

What kind of viewport is this?

PC-side web site is too large to display on the phone, the solution is to first display the full PC page in a virtual layout viewport. Then zoom in so that he can display exactly on the phone, at which point the zoom ratio is 0.4. When you see a window called a visual window, he shows a PC-sized page, assuming the tower has 960px, the size of the viewable window is 960px. If I put the zoom ratio into a 0.5,pc page that is not so big as a phone, the tower refers to a portion of the page, such as 800px, where the viewable window size is 800px. The visual window will change.

Even if you put the entire PC page on your phone, but because the zoom is too small, you still have to zoom in manually. If the layout viewport and the Visual window is as large as the zoom, the Visual window is equal to the device width, when the three unified, there is the most experience, do not need to zoom to view the page well, so there is the concept of ideal viewport.

<name= "Viewport"  content= "width=device-width,minimum-sale= 1.0,maximum-sale=1.0,user-scalable=no "/>

In the head add such a sentence, the viewport width is equal to the device width, the maximum minimum scaling ratio is 1, the user does not allow zooming. We can develop it in the ideal viewport.

It can also be written, but it allows the user to zoom

<name= "Viewport"  content= "Width=device-width, initial-scale=1.0"  >

5, how to analyze the design diagram

As a front-end engineer, what should you do when you get a plan?

Communicate with designers

How do ① communicate with designers?

② asked designers to design specifications [font, color, size, spacing, etc.]?

③ What place must be completely restored?

Analysis Design Diagram

① to see which areas change with screen size and which do not change

② analysis of the overall structure, split into several pieces, which modules can be reused, such as top and footer, convenient template rendering

③ analysis layouts, how each area is arranged, what labels to use, how elements are formatted, etc.

④ cut, with PS or sketch. Note the selection of the cut chart type, transparent image with PNG, animated graph with GIF, color-rich graph with JPG. If you cut it out, it's best to compress it.

6. Design Principle of responsive website

① determines the adaptation of the browser, PC-side generally chrome,firefox,ie9 above, Safari.

Phone, Android comes with browser, Apple Safari,uc, open Gate, 360 and so on.

② Graceful Downgrade scraceful degradation is the first to use the latest technology, write the most beautiful state, rather than to adapt to the old IE and write a difficult to read page.

③ write the page is first write PC or phone end? Which user is more, from which to write first.

④ different devices display the same content, is the small device also show so many things? It's up to the product manager to decide.

⑤ breakpoint, less than or equal to 480px, greater than 481px is less than or equal to 800px, greater than 801px less than or equal to 1400px,1400+. Write media queries do not write according to device type

The logical expression is to be ÷16 with EM units. Why is it? It's a pit.

In the logical expression em relative rem is relatively safe, EM is relative to the parent element, and REM is relative to the HTML element.

÷16 is because the browser default font is typically 16, and media queries are calculated based on the default font.

7. How to organize the directory structure

Directories are named in lowercase, abbreviated, singular

The library can be placed in the vendor folder, plus the compressed Add. min

The ID is named with the hump, and the class name is used-.

Do responsive site pre-required knowledge points-1 pre-preparation