MEMEPh. ideas that are worth sharing...
 » rendc.org  » rendc.com  » notedc.com

 Blogs

Programming

Frameworks

What you must know about responsive layouts

1. Introduction

Responsive web design allows a website to adapt to multiple devices and multiple screens at the same time, allowing the layout and functionality of the website to change with the user's usage environment (screen size, input method, device/browser capabilities). This article mainly introduces some important knowledge points that are easily overlooked in responsive layout.

 

2. Viewport

The viewport often referred to in the mobile front end is the area in the browser used to render web pages. The viewport is usually not equal to the screen size, especially if the browser window can be zoomed . There is a difference between the viewport of the mobile terminal and the PC terminal. The viewport width of the computer terminal is equal to the resolution, while the viewport width of the mobile terminal has nothing to do with the resolution. The default value of the width is specified by the device manufacturer. iOS, Android basically set this viewport resolution to 980px.

 

1. Why is the mobile viewport set to 980px?

Back then, Jobs envisioned: If Apple mobile phones are popular in the market, but each website has not had time to make mobile pages, then users have to use mobile phones to access the computer version of the web page, how to use the small screen to access the big screen page is also readable ? Qiao Gang thought about fixing a viewport width for the mobile phone, so that the viewport width of the mobile phone is equal to the width of the version center of most PC web pages in the world, which is 980px. In this way, when using a mobile phone to access the computer version of the webpage, there is just no blank space beside it. However, after the page is zoomed, the text will become very small, and the user needs to manually zoom in and out to see it clearly, and the experience is very poor.
 

2. Constrain the viewport

In order to solve the previous problem, you can add the following line of code to the webpage:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

 

width=device-width The viewport is the width of the device (that is, a width set by people)//If it is not set, the default is 980px
initial-scale=1.0 The initial viewport size is 1.0 times
maximum-scale=1.0 The maximum multiple is 1.0 times
user-scalable=0 disallows zooming of the viewport


The viewport's label tells the browser how to render the page. Here, the meaning of the tag is to render the webpage content according to the width of the device (device-width).


At this point, if you use document.documentElement.clientWidth to test the width of the browser screen, you will find that the current viewport width is equal to the width of the mobile phone screen, and the approximated viewport width is between 320 and 480 (the mobile phone is used vertically).


The size of this viewport is set by the mobile phone manufacturer, which can ensure that our text, such as 16px, is clear and the size is just right under this viewport. So Constrained Viewport for large screen phones > Constrained Viewport for small screen phones. This ensures that our web pages can use px to write the font size and line height .

It should be noted that the viewport width after the constraint is not its own resolution! ! The resolution of each phone is much larger than its own viewport width!

The most important sentence: Front-end development engineers don't care about the resolution of the phone at all, we only care about the viewport.

 

3. Pictures

People often say "a picture is worth a thousand words", and it's true. No amount of text about muffins on our page is attractive without the pictures. Let's add a picture of a muffin (2000 pixels wide) at the top of the page, similar to the big picture that entices users to look down.

Wow, what a big picture, it makes the whole page look unbalanced, the picture overflows horizontally. No, this must be resolved. It is possible to specify a fixed width for the image with CSS, but the problem is that we want it to automatically scale across different screen sizes . For example, the width of the iPhone screen in our example is 320 pixels. If we set the image to be 320 pixels wide, what happens when the iPhone screen is rotated? At this point 320 pixels becomes 480 pixels.
The solution is very simple, just one line of CSS code can make the image automatically scale with the container width:

img {
 max-width: 100%;
}


Back on the phone, refresh the page, the result is more in line with expectations.
The max-width rule declared here is to ensure that all images are displayed at a maximum of 100% of themselves (that is, they can only be displayed as large as themselves). At this point, if the element containing the image (such as the body or div containing the image) is smaller than the image's inherent width, the image will be scaled to fill the maximum available space .

Why not use width:100%?

To achieve automatic scaling of the image, you can also use a more general width attribute, such as width:100%. However, this rule does not apply here. Because this rule will cause it to appear as wide as its container. In cases where the container is much wider than the image, the image will be stretched unnecessarily.

 

4. Mobile browser kernel

On the mobile side, there are only four independent browser kernels, namely Microsoft's Trident, Firefox's Gecko, open source kernel Webkit, and Opera's Presto.

At present, Microsoft's Trident is mainly a built-in browser for WP7 and 8 systems on mobile terminals. Opera's Presto core is mainly Opera Mobile, OperaMini, Opera browser and Opera HD Beta. The scope of application of the Webkit kernel is more extensive. Android native browsers, Apple's Safari, and Google Chrome (used by Android 4.0) are all developed based on the Webkit open source kernel.

Compatible prefixes:
1 -ms-
2 -moz-
3 -o-
4 -webkit-

UC, Android built-in, Chrome, Safari, and QQ Browser are all webkit kernels, which account for most of the market share from the graph.
So be sure to serve -webkit-. Some companies are only compatible with -webkit-, and others are not compatible with -ms-.

 

5. flow layout

Percentage layout is also known as flow layout, flexbox layout. Mobile web pages do not have the heart of the page, they are all full.

The properties that can be set by percentage are width, height, padding, and margin. Other properties such as border and font-size cannot be set with percentages.

Next let's look at an example:

div{
width: 200px;
height: 300px;
padding:10px;
} 

div p{
width:50%;
height:50%;
padding:10%;
} 

What is the true width of p at this time?


At this time, the real width of p is 140px*190px

 

6. Media Inquiries

1. Why Responsive Web Design Needs Media Queries

CSS3 media queries allow us to apply specific CSS styles to web pages for specific device capabilities or conditions . Without media queries, you can't drastically change the look of a web page with CSS alone. This module allows us to write CSS rules ahead of time that adapt to many unpredictable factors, such as screen orientation horizontal or vertical, viewport larger or smaller, and so on. Although the flexible layout can make the design adapt to more scenes, including certain sizes of screens, it is sometimes not enough, because we need to make more detailed adjustments to the layout. This is made possible by media queries, which are equivalent to basic conditional logic in CSS.

 

2. Media query syntax

The first rule we wrote outside of media queries, is the "basic" style, which works on any device. On this basis, we gradually add different visual effects and functions for devices with different viewports and different capabilities.

body {
    background-color: grey;
 }
@media screen and (min-width:1200px){
    body{
        background-color: pink;
    }
}
 @media screen and (min-width:700px) and (max-width:1200px){
    body{
    background-color: blue;
    }
}
@media screen and (max-width:700px){
    body{
    background-color: orange;
        }
}


in @media It means a media query, querying what device is currently viewing this page, and what its width is. screen means that the device for viewing this webpage is a monitor, not a disabled hearing device or a printer. All possibilities are listed with the and symbol.
Note: Media queries can only wrap selectors, not k:v pairs.

IE6, 7, 8 do not support media queries, and in order to prevent some browsers on the mobile phone from not supporting media queries, do not put all selectors in media queries.

 

7. rem responsive layout

rem responsive layout ideas

  1. Generally do not set a specific width for the element, but for some small icons you can set a specific width value
  2. The height value can be set to a fixed value. How big the design draft is, we will write it strictly.
  3. All fixed values ​​are set in REM (first set a reference value in HTML: the corresponding ratio of PX and REM, then get the PX value on the rendering, and convert it to REM value during layout)
  4. JS obtains the width of the real screen, divides it by the width of the design draft, calculates the ratio, and resets the previous reference value according to the ratio, so that the project can be adaptive on the mobile terminal

What is rem and how is it different from em

rem: The style value of the REM unit of the element in the current page is dynamically calculated for the value of the font-size of the HTML element

em: Represents a multiple of the font size of the parent element. (Special case: in the text-indent attribute, indicating the width of the text)

  body             →font-size:20px;
   <div class="box1">   → font-size:2em;
    box1
      <div class="box2">  → font-size:2em;
        box2
        <div class="box3">  → font-size:2em;
            box3
        </div>
     </div>
  </div>

 

When em is the unit, the font-size property is inherited after calculation, and box1 is calculated to be 40px. Then the box2 inside inherits 40px. The em unit can be used not only to set the font size, but also to set any box model properties, such as width, height, padding, margin, border

One advantage of rem is that it can work with media queries to achieve responsive layout:

@media screen and (min-width: 320px) {
    html {font-size: 14px;}
}
@media screen and (min-width: 360px) {
    html {font-size: 16px;}
}
@media screen and (min-width: 400px) {
    html {font-size: 18px;}
}

Use the scene

If the H5 page we make is only accessible on the mobile side, this is because REM is not compatible with lower version browsers. And if the mobile terminal and the PC side share a set of code, it is recommended to use the flow layout.

How to make a REM responsive layout

1. Get the PSD design draft from the UI designer, and then set a font-size value for HTML in the style. We generally set a value that is convenient for later calculation, for example: 100px

html{
font-size:100px;//1rem=100px
}


2. Write the page, write the style
First, write the style according to the size of the design draft, and then when writing the style value, you need to divide the obtained pixel value by 100 to calculate the corresponding REM value.
It is worth noting that: in the real project, we generally do not write a fixed value for the width of the outer box. Following the idea of ​​​​the flow layout method, we use the percentage method to layout.

margin:0  0.2rem;
height:3rem;


3. Calculate the font-size value of our HTML according to the width of the current screen and the width of the design draft.
For example: the width of the design draft is 640px, one of which is a carousel, its size is 600*300, in the style Set a font-size value of 100px for HTML, the size of the carousel should be 6rem×3rem, then if the width of the mobile phone screen is 375px, what should the font-size be set to.

375/640*100->fontsize=58.59375//At this time, the carousel image can adapt to the size of the mobile phone screen

According to the ratio of the current screen width to the design draft width, dynamically calculate the fontsize value under the current width. If the fontsize value is changed, the previously set values ​​of all REM units will be automatically enlarged or reduced . This can be achieved with the following code:

<script>
~function(){
var desW=640,
winW=document.documentElement.clientwidth,
ratio=winW/desW;
document.documentElement.style.fontSize=ratio*100+"px";
}();
</script>


But if the current screen width is larger than the design draft width, the picture will be stretched and distorted, so the above code needs to be slightly modified:

//html part
<section id="main">
 <div class="box"></div>
</section>

//js part
<script>
 ~function(){
 var desW=640,
  winW=document.documentElement.clientwidth,
  ratio=winW/desW;
 var oMain=document.getElementById(main");

if(winW>desW){
oMain.style.width=desW+"px";
oMain.style.margin="0 auto";
return;
}

document.documentElement.style.fontSize=ratio*100+"px";
}();
</script>

 

How to center an element (final version) Deep understanding of BFC (Block formatting context)