Home > Industries > Internet
| Article Introduction: since the design of the response Web page has been proposed, the controversy has been continuous, in fact, there are only two core issues: the contradictions between too many resource requests and limited terminal support, responsive web design and mobile terminals in the user experience and visual style differences. |
Last week wrote a simple PPT in the group probably introduced, interested in the words can first look at this ppt.
The status and future of mobile internet
Before talking about this topic, let's look at the current situation of web design and front-end development:
Well, you may have begun to notice that you and your friends are increasingly using the iphone or Android phone or tablet--one or two years ago we expected the mobile internet era is coming, and now it's done--we're in the midst of the rapid development of mobile internet is no longer the starting point.
So, what is responsive web design?
Responsive web Design is a concept that Ethan Marcotte put forward last May, in short, that a Web site can be compatible with multiple terminals-not a specific version for each terminal. This concept can be said to be born for mobile internet!
Perhaps you will notice that many well-known sites have launched the iphone or targeted only mobile phone dedicated sites, such as 3g.qq.com, m.taobao.com, ipad.xxx.com and so on ... Even before the front-end observation also tried to use WordPress plug-ins to implement M.qianduan.net mobile Web site.
So the question is-do we have to make a separate website for every device? To allow the site to have the appropriate visual style and operational experience for each device?
This is bound to add a lot of work, and a lot of duplication.
When we do the page, we generally emphasize the concept of modularity, we require a qualified module to be able to "scalable, no infection", it can be used anywhere can be normal display. Responsive web design is similar to this-the Web site works well with any device, without having to do a subweb for each device alone!
However, product managers and designers may still require the site to perform exactly the same in each browser, even pixel restore--wtf! The different browsers themselves, the function, behavior and processing methods are not the same, why to behave exactly the same?!
Let the browser flow ...
How do you do it?
In fact, the implementation of responsive Web page is very simple, are familiar with the technology.
Media Query
Because the current mainstream intelligent terminals are based on iOS and Android, and their own browser is based on the WebKit kernel, so we can fully use the viewport properties and media query technology to achieve the responsiveness of the site:
<meta name= "viewport" content= "Width=device-width, initial-scale=1, maximum-scale=1" >
The following Initial-scale represents the initial scaling, Maximum-scale represents the maximum scaling, and 1 means that scaling is not possible.
1 2 3 4 5 6 7 8 9 (16) 17 |
/* For both the px width screen */@media only screens and
(max-device-width:240px) {
selector{
}
}/
* For 360px width screen */@media only screens and
(min-device-width:241px) and (max-device-width:360px) {
selector{
}
}
/* For the min-device-width:361px px Width screen * * *
( max-device-width:480px) {
selector{
}
} |
Of course, depending on the screen width to fit is the easiest way, media query has a lot of parameters can be used such as orientation, aspect-ratio and so on, do not know how to view this detailed introduction .
In fact, media query is the most used technology in response web design.
Fluid grid (fluid grid)
Many projects are using grid technology (or grid), 960.gs was very popular in the previous years, but as the screen resolution of the general promotion, it is not very suitable for the current needs, so in recent years fluid grid began to become more and more, this technology is also very simple, but the grid unit from PX into% , which controls the width of each column of the page by a percentage, thus achieving a wide adaptive width.
The Web site that uses the fluid grid can automatically adjust the width of each column in the page according to the screen width, thus ensuring the full display and basic function of the page. It's also a good way to do it.
Flex Box
Flex Box is a new technology in CSS3 that is powerful enough to implement a lot of adaptive layouts that we couldn't imagine before.
Sometimes we want the site to be webapp to the mobile phone users, Flexbox is a choice.
For example, to implement a simple structure like this:
It is much like the structure of an app, the head and the bottom fixed, the middle height adaptive, with Flexbox can be simple to achieve:
1 2 3 4 5 6 7 8 9 30 (a) (a) 31 |
. flex_wrap{
height:100%;
Display:box;
Display:-moz-box;
Display:-webkit-box;
-webkit-box-orient:vertical;
-moz-box-orient:vertical;
Box-orient:vertical
}
. flex_bd{
Box-flex:
1;
-moz-box-flex:
1;
-webkit-box-flex:1;
Background: #E7E7E7;
Overflow-y:auto
}
. flex_hd{
background: #16364C;
height:30px;
line-height:30px;
Text-align:center;
Color: #FFF;
font-weight:700;
Font-family:14px
}
. flex_ft{
Background:green;
height:30px;
line-height:30px;
Text-align:right;
} |
HTML code:
1 2 3 4 5 6 7 8 9 ten -one 12 |
<div class= "Flex_wrap" > <div class= "FLEX_HD" > Front-end observation </div> <div class= "FLEX_BD" > <p> This is the main content area </p> <p> This is the main content area </p> </div> <div class= "flex_ft" > <a href= "http://www.qianduan.net/about" title= "About Us" > About Us </a> <a href= "http://www.qianduan.net/copyright" title= "copyright notice" > Copyright Statement </a> <a href= "Http://www.qianduan.net/sitemap" title= "sitemap" > Sitemap </a> </div> </div> |
Although there will be some problems, such as the main content area too much will be hidden, because the Android WebKit and iOS 5 before mobile Safari does not support the Overflow:scroll attribute, but the problem is very good to solve, For example, nested inside a child container, with JS to give a height and use positioning to implement the scroll bar to complete the display of content, or directly using Iscroll and other JS library to achieve. The good news is that safari in IOS5 is starting to support Overflow:scroll.
The inadequacy of the place
If you are concerned about the performance of the site, you may have identified some problems:
Well, none of the options are perfect, but it's not going to be bad. Here are some possible optimization scenarios:
HTML5 Local Storage
For browsers that support HTML5 Appcache/manifest features, we can store some of the static resources that are infrequently changed to local, such as CSS files, images used in CSS, and some JS files:
1 2 3 4 5 6 7 8 9 10 |
Cache MANIFEST Network:/ * cache: img/bg.jpg img/days.otf slideshow.js Slideshow.css Classlist.js |
Then save the file in manifest format and introduce it in the HTML tag:
In this way, the user will be slower on the first visit, but the subsequent access will be very fast, 3G network can also save the user bandwidth.
Mobile device Preferred
A new design process is to design the interface for mobile devices first, and then use the PC side as an extension.
The benefit of this is obvious, the mobile terminal does not load the extra resources, nor does it redraw the page because of the style of the PC, nor does it affect the performance on the PC side.
Fluid picture (fluid image)
The picture on the page is sometimes wider than the mobile/flat screen (viewport), which will open the page container, but the mobile browser can not scroll, the result is cut off part of the picture, and then there will be a part of the content is hidden, users can not see.
The solution to this problem is simple: Set the maximum width of img to 100%.
img{max-width:100%}Well, the premise here is that the IMG tag is not set to the width and height, otherwise the display will be problematic. In addition, it is not recommended to set the Width= "100%" directly, because it will pull the small map large, fuzzy display.
Similarly, the width of the video label and the IFRAME label can also be done, and it is best not to use IFRAME, width is a problem, performance is one aspect.
CSS3 image
This method is a little stunning.
We all know that you can use:: Before and:: After pseudo element +content attributes to dynamically display some content or do other cool things, and is supported in CSS 2.1. However, the content attribute is only used in these two pseudo elements in CSS 2.1, and in CSS3, any element can use the content property, which combines the features of the CSS3 attr property and HTML custom attributes:
Then use media query to dynamically assign values:
1 2 3 4 5 6 7 8 9 10 |
@media (min-device-width:600px) {
img[data-src-600px]
{
content:attr (data-src-600px,
URL);
}
}
@media (min-device-width:800px) {
img[data-src-800px]
{
content:attr (data-src-800px,
URL);
}
} |
Of course, this approach also has deficiencies, such as the PC end wide screen needs to load two image files, and then we also have to prepare a number of picture files.
Pre Label
Some sites, for example, such as the front-end observation of the technology blog, will use the pre to display the source code, and the browser to the pre label default settings White-space:pre, so that the code will not wrap, so that the child containers open, causing the content is hidden problems:
The text on the right is hidden away.
The solution is simple:
pre{
white-space:pre-wrap
Word-break:break-word;
word-wrap:break-all;/* If you want to be compatible with IE, you can add this sentence, consecutive letters break the problem ah .... */
}Of course, not just the pre tag, the key is the value of the White-space and Word-break properties.
Well, the main technology and skills in fact, we will not be unfamiliar. Here are some of the more useful tools:
Responsive web design tools and resources
Abroad in response web design has gone a long way, there are many tools and resources for our reference and use:
CSS Framework
Practical Tools
Controversy and summary
Since the design of the response Web page has been proposed, the controversy has been continuous, in fact, there are only two core issues: the contradictions between too many resource requests and limited terminal support, responsive web design and mobile terminals in the user experience and visual style differences. The former cannot tolerate loading a clunky PC-side page on weak phones/tablets via a turtle-speed 3g/2g network, while the latter's tangled response sites are unlike mobile sites.
My idea is that specific issues specific analysis, such as strong content of the site, can be fully tried to respond to the site, while the heavy vision and functionality of the site, you can try to build a separate mobile site.
In addition, it is obvious that most of the techniques of responsive web design can be used in webapp development.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
