Development of mobile terminal in response to the page layout, and
Responsive layout
Responsive layout is a concept proposed by Ethan Marcotte in May 2010, in a nutshell, is a website compatible with multiple terminals, instead of doing a specific version for each terminal. The concept is to solve the mobile Internet browsing born.
Because responsive layout to make more changes to the styles for different viewport size, and therefore not as liquid layout that lets width automatically adapt so simple.
The core technology to achieve a responsive layout is to use media queries (media selector).
CSS3 media query concept introduced by means of different devices, different viewport size, different style code.
The format of media queries as follows:
Screen and @media (min-width: 1200px) { / * ≥ 1200px viewport style to apply * / } @media Screen and (min-width: 992px) and (max-width: 1200px) { / * ≤ view 992px port < 1200px style to apply * / } @media Screen and (max-width: 992px) { / * viewport <style to be applied 992px * / }
Common viewport size
Viewport size and equipment table viewport equipment ≥1200px big screen: Projector TV PC end ≥992px && < 1200px medium screen: netbooks, small notebooks ≥768px && <992px small screen: Tablet <768px ultra-small screen: mobile phone
According to the table, combined with the actual situation of your site, you can easily draw media query code you need to write.
For example, my website only consider two cases:
1. The mobile terminal displays a style
2. Other devices to share a style
so responsive layout the elements of a need, my CSS code should be similar to the following format:
/ * Total element styles * /
...
/ * style other than the mobile phone terminal * /
@media Screen and (min-width: 768px) {
...
}
/ * end of the phone style * /
@media Screen and ( width-max: 768px) {
...
}
Use media queries in Sass in
the development of a real project, we tend to choose some of the pre-compiler to handle CSS source code that we write, such as SASS. Many pre-compilers to media queries have very good support.
Sass in CSS @media instruction in the use of the same, but adds a little extra functionality: it allows nested CSS rules. If nested within @media CSS rule, when compiled, @ media will be compiled into the outermost layer of the file that contains nested parent selector. This feature allows @media more convenient to use, do not repeat the use of selectors, CSS will not disrupt the writing process.
Example:
.sidebar{
width: 300px;
@media screen and (min‐width:768px) {
width: 500px;
}
}
The development of mobile end page
Some of the features unique to the mobile side, we need to pay special attention in the development. These features include:
Problem 1. The viewport mobile terminal
2. The mobile terminal of scaling issues caused inadvertently
dimensional problems 3. movable end elements
The viewport problem of mobile terminals
Categories device-width, which is the key to the mobile device reads the current width.
<meta name="viewport" content="width=device-width">
This would solve the inconsistency mobile terminal itself and the width of the viewport width issues.
Scaling problems caused by inadvertently moving end
When the user slides the movable end of the page with a finger, a mobile phone tends to provide the following functions:
rapid double-click, the page can be enlarged
two fingers retractable, can zoom page
The method of the user page zoom prohibition :
<Meta name = "the viewport" Content = "width = Device-width, Initial-Scale = 1.0, min imum-Scale = 1.0, maximum-Scale = 1.0, User-Scalable = 0" >
means are:
. 1, initial-scale = 1.0: 1.0 for the initial scale (original size), the purpose of this code is to prevent the user zooming,
2, Minimum-scale = 1.0: the reduction ratio is small pages 1.0 ( original size), is provided for the purpose of this code is placed in some applications (eg JS) reduced scale unintentionally modified page
3, maximum-scale = 1.0: pages large amplification ratio of 1.0 (original size), which is provided sentence code object is to place some applications (eg JS) unintentionally modified enlarged scale page
4, user-scalable = 0: This code is not allowed for the user to zoom the page
size of the problem of mobile terminal element
size with changing the viewport width change
method:
1. Firstly, write a JS code, applied to the web
!(function(win, doc) {
function setFontSize() {
var winWidth = window.innerWidth;
doc.documentElement.style.fontSize = (winWidth / 1080) * 100 + 'px';
}
var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';
var timer = null;
win.addEventListener(evt, function() {
clearTimeout(timer);
timer = setTimeout(setFontSize, 300);
}, false);
win.addEventListener("pageshow", function(e) {
if (e.persisted) {
clearTimeout(timer);
timer = setTimeout(setFontSize, 300);
}
}, false);
//初始化
setFontSize();
}(window, document));
- the width of the draft design code replaced by actual width of the draft design, such as 1080 (do not add units PX)
- The ratio of the replacement code to an appropriate value, such as 100
It is this code constantly monitor changes in the width of the viewport, always ensure:
root element html font size = (width viewport / 1080) * 100
For example, iphoneX viewport width: 375, then, in iphoneX, the root html elements font size: (375/1080) * 100 = 34.72px
2, all the pixel values using a change in css units rem
rem unit with respect to the font size of the root html element (root element is not set if the font size, the font size with respect to the reference). And now, the root element of the font size, just reflects the width of the viewport.
Rem value of a certain size following formula elements:
rem = value of the size of the design draft / 100
For example, the draft design is an element width 100 pixels, then it should be set to a width of 1 rem, Thus, depending on when when the opening size is equal to the size of the draft design 1080, the font size of the root element (1080/1080) * 100 = 100px, its width is 1rem = 100px; if viewport smaller sizes, such as into a 375, then the root element font size (375/1080) * 100 = 34.72px, then its width 1rem = 34.72px. This perfect proportion and design draft agreement.
Of course, the moving end, if you use a background image (for example, FIG Sprite), remember to adjust the size of the background in the same manner as FIG.