What exactly is a responsive layout

To do the front end of the mobile, to receive the needs of the response is definitely inseparable from the layout, then what is the response layout, the implementation of the principle of where, my personal views are as follows:

1. Purpose: In the project you will encounter different terminals, because the terminal resolution is different, so you want to make the user experience better, it is necessary for your page to be able to fit multiple terminals

2. Since the response layout is mostly for mobile, first add the following line of code to the

<name= "Viewport"  content= "Width=device-width, initial-scale=1.0, User-scalable=0, minimum-scale=1.0, maximum-scale=1.0 "/>

This will set the screen to 1:1 of the size display, the browser on the IPhone and other smartphones provides a full view of the site, and prevents users from zooming the page

3. The width percentage, which is called the flow layout, is very simple to use, but the disadvantage is that some of the page element widths are pulled very long, but the height is the same as the original, so it looks very uncoordinated

4. Media query, that is, for different screen sizes to set different styles, it tells the browser page how to render, if a terminal resolution of less than 980px, then you can write:

@media only screen and (max-width:980px) {        }        {}        {}   }

Or

<rel= "stylesheet"  href= "Style.css"  media= "only Screen and (max-width:980px) "/>

If you have more compatible terminal types, write a few more @media or introduce multiple <link/> tags

5.rem, which is adapted by the root element (referring only to the font-size in

@media only screen and (min-width:321px) and (max-width:375px){html{font-size:11px}} @media only screen and (MIN-WIDTH:376PX) and (max-width:414px){html{font-size:12px}} @media only screen and (min-width:415px) and (MAX-WIDTH:639PX){html{font-size:15px}} @media only screen and (min-width:640px) and (MAX-WIDTH:719PX){html{font-size:20px}} @media only screen and (min-width:720px) and (MAX-WIDTH:749PX){html{font-size:22.5px}} @media only screen and (min-width:750px) and (MAX-WIDTH:799PX){html{font-size:23.5px}} @media only screens and (min-width:800px){html{font-size:25px}}

Note: The above is the first to count the main screen devices on their own website, and then go to those devices to do media query settings

6. Fully adaptable, if you want all the device resolution can be compatible with, you can use JS to dynamically calculate the root element of the font-size, the code is as follows:

(function(Doc, win) {varDocel =doc.documentelement, Resizeevt= ' Orientationchange 'inchWindow? ' Orientationchange ': ' Resize ', Recalc=function () {        varClientWidth =Docel.clientwidth; if(!clientwidth)return; DocEl.style.fontSize= * (clientwidth/750) + ' px '; Console.log ($ ("HTML"). CSS ("Font-size")));    }; if(!doc.addeventlistener)return; Win.addeventlistener (Resizeevt, Recalc,false); Doc.addeventlistener (' domcontentloaded ', Recalc,false);}) (document, window);

Note: My company's UI gives a 750-width design, so the font-size of the root element in this screen size is 100px, then the corresponding REM value can be obtained by dividing the size of the specific part of the design by 100 to achieve the conversion from PX to REM;

If the current screen size is 375 (iphone 6), is half of 750, that is, the design map specifies a width of 200px (corresponding to 2rem), now placed on the iphone 6 is displayed as 100px, but the corresponding width value or 2rem, So we just need to add width:2rem to the element to achieve a full-width fit

7. Background image, please refer to background-size this new property

What exactly is a responsive layout