Responsive Development (2), responsive development

Responsive Development (2), responsive development

1. pixels

Because the browser does not work based on the hardware pixel width, but the device independent pixel value that works based on DIPs, there is a link for you.

Http://yunkus.com/physical-pixel-device-independent-pixels)

2. DPR

DevicePixelRatio (DPR) is the ratio of devicePixelRatio to CSS pixels when the default scale is 100%.

For example, for iPhone 5, the CSS pixel of iPhone 5 is 320px * 568px, and the DPR is 2, so the device pixel is 640px * 1136px.

Learn more I will give you a link Haha (http://www.cnblogs.com/xiaohuochai/p/5494624.html)

3. CSS pixels

CSS pixel is the concept of Web programming. It is independent of the device's unit for measuring pixels logically. That is to say, the CSS pixel units we use when making webpages are abstract, rather than actually exist.

Divide the number of hardware partitions by DFR (device pilex ratio) to obtain the number of CSS partitions.

4. Use the window element tag to control the layout on the mobile browser

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

ThewidthThe property controls the size of the view. It can be set to a specific number of pixels,width=600Or, like a special value, this special valuedevice-widthIt is the screen width in CSS pixels in a ratio of 100%. (CorrespondingheightAnddevice-heightValue, which may be useful for pages with elements that change the size or position based on the height of the view .)

Theinitial-scaleAttribute controls the scaling level when the page is loaded for the first time. Ofmaximum-scale,minimum-scaleAnduser-scalableAttribute controls how users can zoom in or out pages

(Https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag) Want to know more please click link to have a look, like my so intimate baby not much

5. Define the window width. The percentage must be used to make the response.

6. Let me talk about media queries.

The basic usage is as follows:

<link rel="stylysheet" media="screen and  (min-width:300px)" href="xxxx.css">

Another

@media screen and (min-width:500px){  body{ background-color:green；}}

 

And

@import url("xx.css")only screen and (min-width:500px);

 

I know. If there are any of these three types, please kindly advise me. The third type is not recommended. I don't know why it seems to affect performance.

The query method can be min-width or max-width at most.

I have never used the rest.

As follows:

Width:The visible width of the browser.
Height:The visible height of the browser.
Device-width:The width of the device screen.
Device-height:The height of the device screen.
Orientation:Check whether the device is in the vertical or horizontal status.
Aspect-ratio:Checks the ratio of the visible width and height of the browser. (For example, aspect-ratio: 16/9)
Device-aspect-ratio:Measure the ratio of the width and height of a device.
Color:The number of digits of the color. (For example, min-color: 32 checks whether the device has a 32-bit color)
Color-index:Check the color in the device color index table. Its value cannot be negative.
Monochrome:Detects the number of bits in each pixel in the monochrome swap buffer area. (This is too advanced, so we probably seldom use it)
Resolution:Detects the resolution of a screen or printer. (For example, min-resolution: 300dpi or min-resolution: 118 dpcm ).
Grid:Checks whether the output device is a grid device or a bitmap device.

7. flexbox elastic Layout

Very powerful about flex

It is mainly because it can automatically fill in the blank area. If an element is blank, it will automatically fill up. If the space becomes crowded, it will narrow down until it occupies the smallest space.

 

. Containe {width: 100%; display: flex; flex-wrap: wrap; // allow line breaks inside the element}

 

 

Other attributes

• Flex-direction
• Flex-wrap
• Flex-flow
• Justify-content
• Align-items
• Align-content

I'll give you a link (http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html? Utm_source = tuicool)

8. Common responsive Modes

I would like to say that one is outside the canvas. Use less frequently-used content such as navigation and Application menus

I don't draw arrows. You know where I clicked.

  @media (min-width: 600px) {        /* We open the drawer. */        nav {          position:relative;          -webkit-transform: translate(0, 0);          transform: translate(0, 0);        }        /* We use Flexbox on the parent. */        body {          display: -webkit-flex;          display: flex;          -webkit-flex-flow: row nowrap;          flex-flow: row nowrap;        }        main {          width: auto;          /* Flex-grow streches the main content to fill all available space. */          flex-grow: 1;        }      }      /* If there is space (> 800px), we keep the drawer open by default. */      @media (min-width: 600px) {        main > #menu:after {          content: 'The drawer stays open if width > 600px';        }        main p, nav p {          text-decoration: line-through;        }      }

 

9. Table

Some table styles are too long. If you use your mobile phone to watch your mobile phone pull, the user experience will be too bad.

① Hide Columns

Leave the most important information.

@media screen and (max-width:500px){    .xxx{    display:none;    }}

About hiding me this also has a link (https://www.thoughtco.com/display-none-vs-visibility-hidden-3466884)

② Responsive table

 <table>      <thead>        <tr>          <th>Team</th>          <th>1st</th>          <th>2nd</th>          <th>3rd</th>          <th>4th</th>          <th>5th</th>          <th>6th</th>          <th>7th</th>          <th>8th</th>          <th>9th</th>          <th>Final</th>        </tr>      </thead>      <tbody>        <tr>          <td data-th="Team">Toronto</td>          <td data-th="1st">0</td>          <td data-th="2nd">0</td>          <td data-th="3rd">0</td>          <td data-th="4th">4</td>          <td data-th="5th">0</td>          <td data-th="6th">1</td>          <td data-th="7th">0</td>          <td data-th="8th">0</td>          <td data-th="9th">0</td>          <td data-th="Final">5</td>        </tr>        <tr>          <td data-th="Team">San Francisco</td>          <td data-th="1st">0</td>          <td data-th="2nd">0</td>          <td data-th="3rd">0</td>          <td data-th="4th">4</td>          <td data-th="5th">0</td>          <td data-th="6th">0</td>          <td data-th="7th">0</td>          <td data-th="8th">0</td>          <td data-th="9th">0</td>          <td data-th="Final">4</td>        </tr>      </tbody>

table {        border: 1px solid #ddd;      }      tr:nth-child(odd) {        background-color: #f9f9f9;      }      @media screen and (max-width: 500px) {        table, thead, tbody, th, td, tr {          display: block;        }        thead tr {          position: absolute;          top: -9999px;          left: -9999px;        }        td {           position: relative;          padding-left: 50%;         }                td:before {           position: absolute;          left: 6px;          content: attr(data-th);          font-weight: bold;        }        td:first-of-type {          font-weight: bold;        }      }

③ Scroll in the table

      td {        min-width: 75px;        text-align: center;      }      th:first-of-type {        min-width: 125px;      }      div {        width: 50%;        overflow-x: auto;      }

10. other small suggestions

① About some small buttons

If the screen is smaller, how can I set the finger size to 48px?

min-width:48px;min-height:48px;

For min-width and min-device-width, the former is based on the browser width. The latter is based on the screen width, which can prevent the webpage content on the computer or other devices from changing with the window size.

② Font

I suggest 16 PX and 1.2em rows are high or 18 PX 1.25 rows are high.

Font-size: 16px; line-height: 1.2em; // or font-size: 18px; line-height: 1.25em;

③ Number of characters in each line

The best English is 45 to 90 characters in each line, and the best on the webpage is 65. Save your eye.

Chinese: Let's see 35 words at the starting point.

I counted about 25 Chinese characters on the mobile phone. English.

11. Use of order

@ Media screen and (min-width: 500px ){. xxx {order: 1 ;}. xx1 {order: 2 ;}. xx2 {order: 0 ;}/// the order displayed when 500px is numerical.

Most of the images on the web page, I will write the response of the images again. If I have an error above, please tell me a message. If you are a cainiao, please forgive me. If you want to learn more about the link I added or Google, thank you.