Responsive layout
l responsive layout is Ethan Marcotte in 2010 Nian 5 a concept proposed by the month, 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.
l responsive layout can provide a more comfortable interface and better user experience for users of different terminals, and the big screen with the current shift designer moving pervasive devices, more and more the use of this technology.
l a typical layout of the site responsive: http://www.16ketang.com/
l Try to gradually narrow the window of the page to see what changes the page
l 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.
l realize the core technology responsive layout is to use media queries ( Media Selector ).
l media queries are CSS3 concept introduced by means of different devices, different viewport size, different style code.
l principle responsive layout, it is a lot of media queries, so that some elements of the page have different styles in different viewport performance.
l Common viewport size
l Although you now know how to use media queries, but we really care about is the page on your phone, tablet, netbook or small pen notebook, PC end has a better expression.
l The problem is that many mobile phone models, other equipment, too, their size is different, how do we determine the current viewport feet -inch device it belongs to what?
l Fortunately, after a large number of practical applications, developers have summed up a set of general rules applicable, in accordance with this rule, you can view the corresponding opening up the size and specific equipment.
l viewport size table and equipment
Viewport equipment
≥1200px big screen: Projector TV PC end
≥992px && <1200px medium screen: netbooks, small notebooks
≥768px && <992px small screen: flat
<768px ultra-small screen: mobile phone
l According to the table, combined with the actual situation of your site, you can easily draw media query code you need to write.
l For example, my website only consider two cases:
- End mobile phone displays a style 2. other devices to share a style
l In Sass use media queries
l When developing an actual project, we tend to choose some of the pre-compiler to handle our written CSS source code, such as SASS . Many pre-compilers to media queries have very good support.
l Sass in @media directive and CSS in the use of the same, but adds a little extra functionality: it allows in CSS nested rules. If @media nested CSS within the rules, when compiled, @media will be compiled into the outermost layer of the file containing the parent nested selector. This feature allows @media more convenient to use, do not need to re-use selector, it will not disrupt the CSS writing process.
The development of mobile end page
l In fact, the development of mobile end page, and develop the difference between an ordinary page and there is no essential. Only unique mobile end some of its features, we need to pay special attention in the development. These features include:
1. The viewport problem of mobile terminal 2. The scaling problem resulting from inadvertently moving end 3. The moves size Q terminal element
The viewport problem of mobile terminals
l viewport refers to the visible area of the browser, the mobile terminal of the viewport in the end how wide is it?
l now available in most mobile phones, such as iphone X , its default viewport width of 980px , and a iphone X screen width of only 375px . You see the problem yet? A width of only 375 pixel mobile phone, was able to show a width of 980 pixels on the page, naturally, the page will be reduced.
l We can use Google's mobile browser side debugging tools to access Baidu search results, you can see the page is significantly reduced , and it fixed page width in 980px .
l in HTML provides us with a key Device-width , the width of the current reading is the key to mobile devices. Therefore, we only need to use the following code, you can make all viewports width of mobile devices and its own width equal to :
<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
l when a user moves the finger while sliding the end of the page, the mobile phone tends to provide the following functions:
1. Quickly click, zoom page 2. two fingers retractable, can zoom page
l Since the end inadvertently moving more, and our website has always been developed specifically for the mobile terminal, regardless of the size or a variety of styles, in the case of default has been very appropriate, and do not require the user to zoom the page (you will found that almost all the app pages, are not allowed scaling), therefore, prevent users from web pages scaling is a good choice.
l specific practices are in one of the meta element to continue adding content:
<meta name="viewport" content="width=device-width, initial-scale=1.0, min imum-scale=1.0, maximum-scale=1.0, user-scalable=0">
1.0 Initial-Scale = L : Initial scale of 1.0 (original size), the purpose of this code is not placed in the user's zoom, writing it on other complex reasons, but the article does not cover
1.0 Minimum-Scale = L : reduction ratio is small pages 1.0 (original size), provided the purpose of this code is placed some program (such as the JS ) unintentionally modified page reduction ratio
maximum = 1.0 Scale-L : large web on an enlarged scale of 1.0 (original size), provided the purpose of this code is placed some program (such as the JS ) unintentionally modified page enlarged scale
Scalable = 0 the User-L : This code is on the page does not allow users to zoom
Size matters movable end elements
l webpage very diversified prime, as the width of the viewport becomes larger, the size also becomes larger, either the font height, the gap has such characteristics.
l when faced font size, width and height, margin , padding when the attributes of the class size can not be set to a fixed pixel values.
l This js code can achieve the conversion rem Found:
!(function(win, doc) { function setFontSize() { var winWidth = window.innerWidth;
doc.documentElement.style.fontSize = (winWidth / design draft width ) * ratio + 'PX';} var EVT = 'onorientationchange' I n-win 'orientationChange':? 'resiz E'; 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));
will
css all pixel values changing use rem units
l We know, REM unit is relative to the root element html font size (if the root element is not set the font size, the font size relative to the baseline). And now, the root element of the font size, just reflects the width of the viewport.
l Thus, we only need the value of various sizes, using rem as a unit can be adapted to change the width of the viewport.
l particular how it is provided, is very simple, one element of a certain size rem value of the following formula: rem value = design artwork size / 100
l For example, the draft design is an element width 100 pixels, then it should be set to a width of 1 rem , Thus, when the viewport size equal to the size of the draft design 1080 , the font size of the root element (1080/1080) 100px = 100 * , its width is 1 rem = 100px ; if viewport smaller sizes, such as into a 375 , then the font size of the root element (375/1080) * 100 = 34.72px , then its width 34.72px = 1 rem . This perfect proportion and design draft agreement.
l Of course, in the mobile terminal, if you use a background image (for example, FIG Sprite), remember to adjust the size of the background in the same manner as FIG.