A brief discussion on adaptive layout issues on mobile devices (responsive, rem/em, Js dynamics)

With the popularization of 3G, more and more people use mobile phones to access the Internet. Mobile devices are surpassing desktop devices as the most common terminal for accessing the Internet. Therefore, web designers have to face a difficult problem: how to present the same web page on devices of different sizes? This article will describe the concepts and methods of adaptive web design, which enables web developers to maintain the same web page code to provide a better reading experience on multiple devices. This article introduces in detail the implementation method of adaptive web pages, hoping to help you who are confused.

1. Add meta tags to the HTML header

Add a meta tag in the HTML header, that is, the head tag, to tell the browser that the width of the web page is equal to the width of the device screen and does not scale. The code is as follows:

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

Let's briefly analyze the meaning of this line of code: width=device-width means that the width of the web page is equal to the width of the device screen, initial-scale=1.0 means setting the initial zoom ratio of the page to 1, user-scalable=no means prohibiting users from zooming, maximum-scale=1.0 and minimum-scale=1.0 mean setting the maximum and minimum page zoom ratios. Because major browsers parse meta tags to different degrees, we should try our best to be compatible with all browsers.

2. Percentage Layout

In page layout, combining relative width and absolute width for layout will be more conducive to the maintainability of the web page.

The following figures show the layout of Lagou.com on iPhone5, iPhone6 ​​and iPhone 6 Plus. It can be seen that as the screen width of the device changes, the font size and spacing displayed are different even for the same set of web page codes. The part within the red box uses percentage layout, which will improve the maintainability of the web page.

3. Implementation of responsive pages

There are currently two common ways to achieve responsiveness. One is to use media queries, and the other is the grid layout under Bootstrap. I will introduce the grid layout when introducing Bootstrap later. Here I will mainly talk about how to use media queries to achieve responsive layout.

Media queries, also known as @media queries, can set different styles for different screen sizes. Especially if you need to design responsive pages, @media is very useful. When you resize the browser, the page will be re-rendered according to the browser's width and height. Because it is a style setting, just put the media query related code at the bottom of the CSS file.

To help you understand the usage of responsiveness more clearly, I have listed two examples below. The first case is relatively simple, and it realizes the function of changing the background color of the body in different page widths. The second case uses a specific project as an example, which is more convenient for users.

Example 1:

If the page width is less than 300 pixels, change the background color of the body to red:

@media screen and (max-width: 300px) {
    body {
         background-color:red;
    }
}

If the page width is greater than 300 pixels and less than 600 pixels, change the background color of the body to green:

@media screen and (min-width: 300px) and (max-width: 600px) {
    body {
         background-color:green;
    }
}

If the page width is greater than 600 pixels, change the background color of the body to blue:

@media screen and (min-width: 600px) {
    body {
         background-color:blue;
    }
}

Code explanation:

Screen refers to computer screens, tablets, smartphones, etc. min-width and max-width are used to define the minimum and maximum width of the page in the device.

Example 2: Responsive implementation of Visual China homepage

First, let’s take a look at the display effects of this page in different windows:

When the window width is greater than 1200px, the page style is as follows:

When the window width is greater than 900px and less than 1200px, the page style is as follows:

When the page width is less than 900px, the page style is as follows:

Next, let's look at the specific code implementation:

The html code is as follows: Note that there are several pictures and several cols

<div class="group_wrap">
    <div class="group">
        <div class="col">
            <div class="img_logo">
                <img src="img/8.jpg" alt="">
            </div>
        </div>
        <div class="col">
            <div class="img_logo">
                <img src="img/9.jpg" alt="">
            </div>
        </div>
    </div>
</div>

The css code is as follows, the default is when the page width is greater than 1200px:

.group_wrap{
    width: 100%;
    overflow: hidden;
}
.group{
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;
}
.col{
    width: 280px;
    margin: 10px;
    float: left;
}
.img_logo{
    padding: 10px;
    background: white;
}

The responsive code is as follows, just put it at the bottom of the css file:

/*When the page width is between 900px and 1200px*/
@media screen and (min-width: 900px) and (max-width: 1200px) {
    .group{
        width: 900px;
    }
}
/*When the page width is between 600px and 900px*/
@media screen and (min-width:600px) and (max-width: 900px) {
    .group{
        width: 600px;
    }
}

Summary: In fact, the implementation of responsive pages is very simple. As long as you study hard and practice frequently, you will be able to master it!

4. Use relative fonts on the page

In our normal web page layout process, we often use the absolute unit pixel (px) for layout. Such layout is not suitable for the implementation of our adaptive web pages, so we will now introduce two common absolute units em and rem. rem (font size of the root element) refers to the unit of font size relative to the root element. Simply put, it is a relative unit. When you see rem, you will definitely think of the em unit. em (font size of the element) refers to the unit of font size relative to the parent element. They are actually very similar, except that one calculation rule depends on the root element and the other depends on the parent element.

1. Relative length unit em

Characteristics of em: ① The value of em is not fixed; ② em always inherits the font size of the parent element.

Without further ado, let's get straight to the code:

HTML code:

<div class="one">
    <span>First layer</span>
    <div class="two">
        <span>Second layer</span>
        <div class="three">
            <span>Third Layer</span>
        </div>
    </div>
</div>

CSS code:

body{
    font-size: 20px;
}
.one{
    font-size: 1.5em;
}
.two{
    font-size: 0.5em;
}
.three{
    font-size: 2em;
}

result:

.one ---> 30px 1.5 * 20 = 30px
.two ---> 15px 0.5 * 30 = 15px
.three ---> 30px 2 * 15 = 30px

Code Analysis:

em will inherit the font size of the parent element. For most browsers, if the body font size is not given, the default is 16px, so for the div with class name one, its parent is body, so 1em = 16px; in this case, the font size of body is specified to be 20px, so for .one, 1em = 20px, then 1.5em = 30px. So the font-size of one is 30px.

For the div with class name two, its father is one. Because em inherits the font size of the parent element, 1em = 30px, then 0.5em = 15px, so the font-size of two is 15px.

For the div with class name three, its parent is two. Because em inherits the font size of the parent element, 1em = 30px, then 0.5em = 15px, so the font-size of two is 15px.

2. Relative length unit rem

rem is a relative unit newly added in CSS3 (root em), which has attracted widespread attention. How is this unit different from em? The difference is that when you use rem to set the font size for an element, it is still a relative size, but it is only relative to the HTML root element. This unit combines the advantages of relative size and absolute size. It can be used to proportionally adjust all font sizes by only modifying the root element, while avoiding the chain reaction of compounding font sizes layer by layer.

Let's look at the following example:

HTML code:

<div class="one">
    <span>First layer</span>
    <div class="two">
        <span>Second layer</span>
        <div class="three">
            <span>Third Layer</span>
        </div>
    </div>
</div>

CSS code:

html{
    font-size: 20px;
}
.one{
    font-size: 1.5rem;
}
.two{
    font-size: 0.5rem;
}
.three{
    font-size: 2rem;
}

result:

.one ---> 30px 1.5 * 20 = 30px
.two ---> 10px 0.5 * 20 = 10px
.three ---> 40px 2 * 20 = 40px

Code Analysis:

rem is a new unit introduced in CSS3. The value of rem is always relative to the font-size set in the root element html. If it is not set, the default font-size in most browsers is 16px, so 1rem = 16px;

So for a div with class name one, 1.5rem = 1.5 * 20 = 30px. The others are similar and will not be elaborated one by one.

Summary of em and rem:

"em" sets the font size relative to its parent element, which creates a problem. To set any element, you may need to know the size of its parent element. When we use it multiple times, this can introduce unpredictable risks of errors. Rem is relatively easier to use. As far as my company is concerned, rem is used very often in actual project development. It is estimated that in the near future, domestic designers will fall in love with rem just like foreign designers.

5. Js dynamically sets rem to achieve mobile font adaptation

In fact, after talking so much, you may have understood the usage of rem, but you still don’t know how to use rem to achieve mobile adaptation. After all, the reason why rem can achieve mobile adaptation lies in its own characteristics. It can always change its value according to the font size of the root element. The screen sizes of various common mobile phones are shown in the figure below:

We want to achieve mobile-side adaptation, that is, to allow the attribute values ​​of page element fonts, spacing, width and height to change with the change of mobile phone screen size. Next, let's see how to use Js to dynamically set rem and achieve mobile-side adaptation. The Js code is as follows:

//Get the html element var html = document.getElementsByTagName('html')[0]; 
//Screen width (compatible processing)
var w = document.documentElement.clientWidth || document.body.clientWidth;
//The number 750 is based on the actual size of your design, so the value depends on the size of the design html.style.fontSize = w / 750 + "px";

The above code uses Js to obtain the width of the device screen and dynamically changes the font-siz attribute of the root element html according to the width of the screen. For example, for iPhone 6, the screen size is 750, so the font-size of html on iPhone 6 is 1px, so 1rem = 1px; for iPhone 5, the screen size is 640, so the font-size of html on iPhone 5 is 640/750 = 0.85333px, so 1rem = 0.85333px. In this way, even if we set the same size and unit for an element, it will display different sizes on different devices. For example, div{width:100rem}, its width will be equal to 100px on iPhone 6, and its width will be equal to 100 * 0.85333 = 85.333px on iPhone 5. In this way, we have truly achieved mobile adaptability. How about it? Isn’t it simple?

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.