Talking about the adaptive problem of mobile end--responsive, rem/em, using JS to dynamically realize mobile self-adaptation

With the popularization of 3G, more and more people use mobile Internet. Mobile devices are exceeding desktop devices and becoming the most common endpoint for accessing the Internet. As a result, web designers have to face a dilemma: how can the same page be presented on devices of different sizes? This article will describe the concepts and methods of adaptive web design so that Web developers can maintain the same page code, allowing the site to have a better reading experience on a variety of devices. This article introduces the implementation of the Adaptive Web page in detail, hoping to bring you the help of confusing.

I. Adding META tags to the head of HTML

Add a meta tag to the head of the HTML header, which tells the browser that the page width is equal to the screen width of the device and does not scale, as follows:

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

A simple analysis of the meaning of this line of code: Width=device-width indicates that the width of the Web page is equal to the width of the device screen, initial-scale=1.0 indicates that the setting page initial scaling is 1,user-scalable=no to prohibit the user from scaling, The maximum-scale=1.0 and minimum-scale=1.0 represent the largest and smallest page scaling ratios. Because the browser does not have the same degree of parsing as meta tags, we want to be as compatible as possible with all browsers.

Two. Percent layout

In the page layout, the relative width and the absolute width of the combination of layout, will be more conducive to the maintainability of the Web page.

In the IPhone5, IPhone6 and iphone 6 Plus layouts, you can see that the font size and spacing are different, even if the same set of page codes are displayed, as the screen width of the device varies. In the red box, the percentage layout is used, and the maintainability of the Web page is better.

Three. Implementation of responsive pages

At present, there are two ways to implement the response, one is to use Media query , the other is the grid layout under Bootstrap, introduce the bootstrap when introducing the grid layout, Here's how to use media queries to implement responsive layouts.

Media queries, that is @media queries, media queries can set different styles for different screen sizes , especially if you need to design responsive pages, @media is very useful. When you reset the browser size, the page will also re-render the page based on the browser's width and height. Because the style is set, the code that is associated with the media query is placed at the bottom of the CSS file.

In order to understand the usage of the response more clearly, I have listed two cases below. The first case is relatively simple, which realizes the effect of changing the body background color in different page widths. The second case is an example of a specific project, more user-friendly

Example 1:

If the page width is less than 300 pixels, the background color of the modified body is 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, the background color of the modified body is green:

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

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

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

Code Explanation:

Screen means 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: Visual China Home (http://www.shijue.me/) responsive implementation

First look at how the page looks in different windows:

The page styles are as follows 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:

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 There are several pictures that write several col

<div class= "Group_wrap" >    <div class= "group" >        <div class= "col" >            <div class= "Img_ Logo ">                            </div>        </div>        <div class=" col ">            < Div class= "Img_logo" >                            </div>        </div>    </div> </div>

CSS code as follows, the default is the page width is greater than 1200px time page:

. 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;}

Implement the response code as follows, placed at the bottom of the CSS file:

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

Summary: In fact, the implementation of the responsive page is very simple, as long as serious learning, often practice, you can master!

　　

Four. Pages using relative fonts

We often use absolute pixel (px) to lay out the layout of our usual Web page layout, which is not suitable for the implementation of our adaptive Web page, so we 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. See REM Everyone will think of EM units, EM (font size of the element) is the unit relative to the font size of the parent element. They are very similar, except that a calculated rule is dependent on the root element one is dependent on the parent element calculation.

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.

Nonsense not much to say, directly on the code:

HTML code:

<div class= "One" >    <span> First level </span>    <div class= "Two" >        <span> Second Level </ span>        <div class= "three" >            <span> Third level </span>        </div>    </div></ Div>

CSS code:

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

Results:
. One  --->  30px    1.5 * = 30px
.  --->  15px    0.5 * = 15px
. Three---> 30px     2  * 30px  

Code Analysis:
EM inherits the font size of the parent element, and for most browsers, if the body font size is not given, the default is 16px, so for a div named one, its father is body, so 1em = 16px; In this case, the body font size is 20px, so for. One, 1em = 20px, then 1.5em = 30px. So one's font-size is 30px.
For a DIV whose class name is two, its father is one, because EM inherits the font size of the parent element, so 1em = 30px, then 0.5em = 15px, so the font-size is 15px.
For a div with class name called Three, its father is two, because EM inherits the font size of the parent element, so 1em = 30px, then 0.5em = 15px, so the font-size is 15px.

2. Relative length unit REM

REM is a new relative unit of CSS3 (root em, root em), and this unit has aroused widespread concern. What is the difference between this unit and EM? The difference is that when you use REM to set the font size for an element, it is still relative size, but relative to the HTML root element. This unit is a combination of relative size and absolute size of the advantages in one, through it can only modify the root elements in proportion to adjust all font size, but also to avoid the size of the font-layer composite chain reaction.

Let's take a look at the following example:

HTML code:

<div class= "One" >    <span> First level </span>    <div class= "Two" >        <span> Second Level </ span>        <div class= "three" >            <span> Third level </span>        </div>    </div></ Div>

CSS code:

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

Results:
. One  --->  30px    1.5 * = 30px
.  --->  10px    0.5 * = 10px
. Three---> 40px     2  * = 40px  

Code Analysis:

REM is the new unit introduced in CSS3, the value of REM is always relative to the font-size size set in the root element html, if not set, the default is font-size in most browsers is 16px, then 1rem = 16px;

So for a div named one, the class name is 1.5rem = 1.5 * = 30px. Other similar, no longer one by one repeat.

　　　A summary of EM and REM:

"em" is relative to its parent element to set the font size, so there is a problem, any element setting, it may be necessary to know the size of his parent element, when we use multiple times, will bring unpredictable error risk. REM is relatively easy to use, and as far as my company is concerned, there is a lot of rem in real-world project development. It is estimated that in the near future, domestic designers will fall in love with rem like foreign designers.

Five. js dynamic set REM to achieve mobile font adaptive

As a matter of fact, you may have understood the use of REM, but have not yet learned how to use REM to achieve adaptive mobility. In the final analysis, the REM adaptive Mobile is the original feature of its own, it can always according to the root element of the font size to change its own values. The screen size of various common mobile phones is as follows:

　　

We want to achieve mobile phone-side adaptation, that is, you can make the page element font, spacing, width and high attribute values can vary with the size of the mobile phone screen changes, next we see how to use JS to dynamically set up REM and mobile-based adaptive, JS code is as follows:

Gets the HTML element var html = document.getelementsbytagname (' html ') [0]; Width of screen (compatible handling) var w = Document.documentElement.clientWidth | | document.body.clientwidth;//750 This number is based on the actual size of your design diagram, so the value is specific to the size of the design html.style.fontSize = w/750 + "px";

The above code realizes using JS to get the width of the device screen, and dynamically change the Font-siz property of the root element html according to the width of the screen . For example, for iphone6, the screen size is 750, then in IPhone6 the HTML font-size is 1px, so 1rem = 1px; for iPhone5, the screen size is 640, Then under IPhone5 the HTML font-size is 640/750 = 0.85333px, so 1rem = 0.85333px. That way, even if we set the same size and unit for an element, it will show a different size under different devices. For example Div{width:100rem}, under IPhone6 its width will be equal to 100px, and under iPhone5 it is equal to the width of * 0.85333 = 85.333px. So we can really achieve the mobile end of the adaptive, how, is not very simple!

　　If you have any questions, can give me a message, I will promptly reply to you, I wish you all the progress of learning, work smoothly!

　　

Talking about the adaptive problem of mobile end--responsive, rem/em, using JS to dynamically realize mobile self-adaptation